在 ngFor 循环中禁用按钮答案

【问题标题】：disable buttons in ngFor loop在 ngFor 循环中禁用按钮
【发布时间】：2019-04-03 11:53:00
【问题描述】：

我想通过ngFor 循环禁用内部按钮。我在ngFor 内部设置了i-index，但问题是它只禁用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;

【问题讨论】：

您需要为项目获取对象数组
什么是星期几？
你也可以分享你的对象数组吗？
days 是一个包含 30 个项目的数组。天[1,2,...]
如果你想禁用完成的天数，那么你应该使用[disabled]="i <= dayFinished"

标签： angular ngfor

【解决方案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>

【讨论】：

这应该是公认的答案。清洁溶液。

【解决方案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);
   }

【讨论】：

那么您是否要禁用您点击的日期？或者那些比完成日期更短的，请解释你想要实现什么？
是的，我试图禁用我点击的日期。