激活和取消激活按钮，删除列表angular2

Question

我想切换活动并停用按钮中的类。例如对于参考link，在这个我有5个按钮，当我点击第一个按钮删除最后一个按钮，我如何删除点击按钮？以及如何实现切换激活和停用类？

<ion-item> 
    <ion-label >Add</ion-label> 
    <ion-input type="text" value="" #newTag (keyup.enter)="addTag(newTag.value)" (blur)="addTag(newTag.value); newTag.value='' "></ion-input> 
    </ion-item> 
    <button (click)=addTag(newTag.value)>Add</button> 
    <button *ngFor="let category of categories" ion-button >{{category}} <span (click)="delete()">X</span></button> 

file.ts

@Input() 
    newTag: any; 
    categories = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; 
    addTag(newTag: string) { 
    if (newTag) { 
     this.categories.push(newTag); 
    } 
    } 
    delete() { 
    var index = this.categories.indexOf(this.newTag); 
    this.categories.splice(index, 1); 
    } 

Answer 1

试试这个。我不确定离子框架。我曾与angular2但不离子2

<ion-item *ngIf="!showButton"> 
    <ion-label>Add</ion-label> 
    <ion-input type="text" value="" #newTag (keyup.enter)="addTag(newTag.value)" (blur)="addTag(newTag.value); newTag.value='' "></ion-input> 
</ion-item> 
<button (click)="removeButton()">Add</button> 
<button *ngFor="let category of categories; let i = index;" ion-button>{{category}} <span (click)="delete(i)">X</span></button> 


@Input() 
newTag: any; 
showButton: boolean = true; 
categories = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; 

removeButton() : void { 
    this.showButton = false; 
} 

addTag(newTag: string) { 
    if (newTag) { 
    this.categories.push(newTag); 
    } 
} 

delete(index) { 
    this.categories.splice(index, 1); 
} 

使用状态类

定义布尔变量

stateOfButton: boolean = false;

在您HTMLbutton

<button [class.active="stateOfButton"] (click)="changeState()">Add</button>

风格时一样多，你想

​​

在您的组件

changeState(): void { 
    this.stateOfButton = !this.stateOfButton; 
} 

希望工程与您联系。干杯!