如何在ngfor中使用if语句？

Question

I have a loop of 5 buttons and I want to disable the second button, so I tried with using the *ngIf inside the *ngFor but its not working correctly for me. Can you help me? Thanks!

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

Answer 1

You can try this

If you want to disable the second button in a loop then you can set i==1 (because index always start from 0)

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

I hope this will be useful

Answer 2

You can use index with ngFor .

Here is the way you can do

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

index always start from 0 so check i==1

Answer 3

You can use function in ngFor instead of array like this

in your html=>

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

in your component=>

filterDays(){
  return days.filter(x => x.day == "dayFinished");
}