禁用ngFor循环中的按钮

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

如果您想要禁用已点击的日期

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);
   }

Answer 2

你可以使用这样的对象数组[{day：1，disabled：true}，{day：2，disabled：false}]，然后使用属性'disabled'作为辅助功能，'day'显示你为组件中的true / false执行逻辑

<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>