Angular2：嵌套复选框

Question

我想对 select 父对象使用复选框，然后只显示该对象上属性（数组）的复选框。例如，我有一个产品对象，每个产品都有许多项目。我想显示产品中所有项目的检查清单，但前提是产品本身已经过检查。

我尝试了以下代码，它根据初始值显示或隐藏项目 - 我希望能够打开和关闭复选框以及隐藏或显示项目。

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

Answer 1

你的#ref 在你的 div 上，你正在检查它是否被选中。 div 永远不会 return true 是否正确？您需要在此处引用并检查 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>

Angular2：嵌套复选框

Angular 2: Nested Check Boxes

angular-ng-if

angular