javascript - Angular：在 ngFor 内绑定 ngIf

Question

我正在尝试在每个列表项上使用条件填充列表，其中条件可以通过用户输入进行更改。
例如：
app.component.ts

private check = true;
private some = [
    {name: 'ABC', condition: true},
    {name: 'def', condition: this.check},
    {name: 'GHI', condition: true}
];

app.component.html

<div *ngFor="let item of some">
  <div *ngIf="item.condition">
  {{item.name}}
  </div>
</div>

<select [(ngModel)]="check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

在这里，我有一个列表，['ABC', 'def', 'GHI']我想始终显示其中的一些元素，(condition: true)而对于其余的，我将条件放在一个变量(check)中。
列表正在正确加载，但在(check)通过下拉列表更改条件变量时，没有反映更改（列表未更新）。
任何帮助将非常感激！

标签： javascripthtmlangulardata-bindingjavascript-databinding

Answer 1

您必须使用一个对象将“已检查”属性链接到数组。
此外，如果条件为假，您应该使用<ng-container>它以便不生成任何 HTML。

<!-- HTML -->
<ng-container *ngFor="let item of some">
  <div *ngIf="item.condition">
    {{item.name}}
  </div>
</ng-container>

<select [(ngModel)]="myFakeForm.check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

// TS
public myFakeForm = { check: true }
public some = [
    {name: 'ABC', condition: true},
    {name: 'def', condition: this.myFakeForm.check},
    {name: 'GHI', condition: true}
];