Question

我想切换活动并停用按钮中的类。例如对于ref 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而不是Ionic 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;

在您的HTML按钮

上

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

根据需要设置样式

.active { background: red }

在您的组件上

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

希望它适合你。干杯！

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

1 个答案: