アクティブ/非アクティブ化ボタン、リストを削除する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

はこれを試してみてください。私はイオンの枠組みがわからない。私はあなたのHTMLbuttonでブール変数

stateOfButton: boolean = false;

を定義したクラス

の状態を使用してイオン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); 
} 

angular2で働いなく

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

あなたのコンポーネント

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

で

​​

をしたい、それは限り

スタイルは、それはあなたと一緒に動作します願っています。乾杯！