disable buttons in ngFor loop

问题

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?

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>

And in the .ts file :

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

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

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

回答2:

You can use an array of object like this [{day: 1, disabled: true}, {day: 2, disabled: false}], then you use the property 'disabled' for the accessibility and the 'day' to display You do the logic for the true/false in the component

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

来源：https://stackoverflow.com/questions/55494515/disable-buttons-in-ngfor-loop

标签

angular

ngfor