Angular：在 ngFor 内绑定 ngIf答案

【问题标题】：Angular: Binding on ngIf inside ngForAngular：在 ngFor 内绑定 ngIf
【发布时间】：2020-06-21 05:36:33
【问题描述】：

我正在尝试在每个列表项上使用条件填充列表，其中条件可通过用户输入进行更改。
例如：
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) 时，未反映更改（未更新列表）。
任何帮助将不胜感激！

【问题讨论】：

标签： javascript html angular data-binding javascript-databinding

【解决方案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}
];

【讨论】：

感谢您的回复！但是上面的 sn-p 不起作用。列表仍然是根据条件的初始值。你能再检查一遍吗？
在这种情况下，您可能必须改变它的完成方式。 some 是静态数组吗？我的意思是它不依赖于任何东西，你在构造函数中构建它总是有 3 个元素，只有第二个元素取决于复选框？

【解决方案2】：

您应该对模板中解析的字段使用公共访问权限
this.check 是作为值而不是对组件字段的引用传递的 - 这就是为什么它在下拉选择中没有改变。

所以为了解决这个问题，你必须以某种方式通过引用传递“检查”标志。您可以将检查从布尔值更改为某个对象，例如： check = {value: boolean = true}; 或考虑更通用的方法:)

【讨论】：

我试过按照上面说的做，但是还是一样。列表未更新