[英]Angular: Binding on ngIf inside ngFor
我试图在每个列表项上填充一个带有条件的列表,其中条件可以通过用户输入更改。
例如:
app.component.ts
private check = true;
private some = [
{name: 'ABC', condition: true},
{name: 'def', condition: this.check},
{name: 'GHI', condition: true}
];
应用程序组件.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)
,更改未反映(列表未更新)。
任何帮助将非常感激!
您必须使用一个对象将“已检查”属性链接到数组。
此外,如果条件为假,您应该使用<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}
];
this.check
作为值传递而不是对组件字段的引用 - 这就是为什么它在下拉选择时没有改变。 所以为了解决这个问题,你必须以某种方式通过引用传递“检查”标志。 您可以将检查从布尔值更改为某个对象,例如: check = {value: boolean = true};
或者想出更通用的方法:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.