Angular 2:嵌套复选框
问题描述:
我想使用复选框来选择父对象,然后只显示该对象上的属性(数组)的复选框。例如,我有一个产品的对象,每个产品都有一些项目。我想显示产品中所有项目的检查清单,但仅限于产品本身已被检查。Angular 2:嵌套复选框
我试着通过它下面的代码显示或隐藏基于初始值的项目 - 我希望能够打开和关闭复选框,并隐藏或显示项目。
<div *ngFor="let product of products; let i = index" #ref>
<md-checkbox type="checkbox"> {{product.productTitle}}</md-checkbox>
<div *ngIf="ref.checked">
<div *ngFor="let item of product.items; let i = index">
<md-checkbox type="checkbox">{{item.code}}</md-checkbox> - {{item.name}}
</div>
</div>
</div>
答
你的#ref是你的div,你正在检查它是否被检查。该div永远不会返回真正的检查正确吗?你需要引用你的并在那里检查checked
。
例如(根据您的MD-CheckBox组件是如何配置的):
<div *ngFor="let product of products; let i = index">
<md-checkbox type="checkbox" #ref> {{product.productTitle}}</md-checkbox>
<div *ngIf="ref.checked">
<div *ngFor="let item of product.items; let i = index">
<md-checkbox type="checkbox">{{item.code}}</md-checkbox> - {{item.name}}
</div>
</div>
</div>
是你的产品FormArray中定义的? – joshrathke
目前,我的计划是采取选定的项目,并将其显示在表单中。如果有帮助,我可以将产品放入表单中? – ccocker
你介意发布组件代码,还是至少formGroup声明? – joshrathke