激活和取消激活按鈕，刪除列表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; 
} 

希望工程與您聯繫。乾杯!