禁用ngFor循环中的按钮 [英] disable buttons in ngFor loop

问题描述

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

I want to disable buttons inside by ngFor loop.I set the i-index inside ngFor but the issue is that it only disables the button with the id of i.If i want to disable multiple buttons inside this loop what should i do?

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

Lets say i have 5 buttons.I want to disable the button number 1.After i want to disable 2.With this code when i change to 2 the 1 goes back to enable.

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

推荐答案

如果要禁用单击的日期，则

if you want to disable days that you have clicked then

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文件中

In component.ts file

   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循环中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！