如何在 ngfor 中使用 if 语句？答案

【问题标题】：How can i use the if statement in ngfor?如何在 ngfor 中使用 if 语句？
【发布时间】：2019-04-03 09:38:48
【问题描述】：

我有一个包含 5 个按钮的循环，我想禁用第二个按钮，所以我尝试在 *ngFor 中使用 *ngIf，但它对我来说无法正常工作。你能帮助我吗？谢谢！

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

【问题讨论】：

标签： angular ngfor

【解决方案1】：

你可以试试这个

如果你想禁用循环中的第二个按钮，那么你可以设置i==1（因为索引总是从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>

希望对你有用

【讨论】：

【解决方案2】：

您可以在 ngFor 中使用函数而不是这样的数组

在你的 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>

在你的组件中=>

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

【讨论】：

【解决方案3】：

您可以将索引与ngFor 一起使用。

你可以这样做

<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 总是从 0 开始，所以检查 i==1

【讨论】：

谢谢！我根本没有使用 ngIf！我刚刚添加了“i=index”。
如果我的回答对你有用，请接受我的回答
我还有一个问题。我可以将索引设为数组吗？为了解释这一点。假设我完成了第 1 天，所以我想在第二天禁用按钮 1，并在最后一天禁用按钮 1 和 2....我希望你明白我的意思。
您能否在一个单独的问题中提出这个问题，您的代码中包含包含数组的对象，以便我能更好地了解
代码是这样的：
DAY {{day}}
问题是当我将 i 从 1 更改为 2 时，只有按钮 2 被禁用。然后，如果我更改为 3，则只有 3。但我希望所有这些都被禁用。