Question

我想通过ngFor循环禁用内部按钮。我在i-index内设置ngFor，但问题是它只禁用了ID为i的按钮。禁用此循环内的多个按钮，我该怎么办？

假设我有5个按钮。我想禁用按钮编号1。我要禁用按钮2。使用此代码，当我更改为2时，1返回启用。

<div *ngFor="let day of days let i=index">
    <ion-button id={{day}} expand="block" size="large" (click)="test(day)" ngDefaultControl [(ngModel)]="days" [disabled]="i==dayFinished" >DAY {{day}}</ion-button>
</div>

并在 .ts 文件中：

   dayFinished = null;
   this.dayFinished = this.route.snapshot.paramMap.get("id");
   this.dayFinished -= 1;

Answer 1

您可以使用类似[{day：1，disabled：true}，{day：2，disabled：false}]的对象数组，然后对可访问性使用属性'disabled'和'day'显示您在组件中执行对/错逻辑

<div *ngFor="let item of objectArray let i=index">
    <ion-button id={{item.day}} expand="block" size="large" (click)="test(item.day)" ngDefaultControl [(ngModel)]="days" [disabled]="item.disabled" >DAY {{item.day}}</ion-button>

Answer 2

如果您要禁用点击的天数，则

html

<div *ngFor="let day of days let i=index">
    <ion-button id={{day}} expand="block" size="large" (click)="test(day)" ngDefaultControl [(ngModel)]="days" [disabled]="checkIfFinnished(day)" >DAY {{day}}</ion-button>
 </div>

在component.ts文件中

   dayFinished = [];

   this.dayFinished.push(this.route.snapshot.paramMap.get("id"));


  test(day){
   if(this.dayFinished.includes(day)){
      this.dayFinished.splice(this.dayFinished.indexOf(day),1);
   }
   else
   { 
    this.dayFinished.push(day);
   }
  }

  checkIfFinnished(item){
     return  this.dayFinished.includes(item);
   }

禁用ngFor循环中的按钮

2 个答案: