角2：ネストされたチェックボックス

Question

親オブジェクトを選択し、そのオブジェクトのプロパティ（配列）のチェックボックスのみを表示するために、チェックボックスを使用したいと思います。たとえば、私は製品のオブジェクトを持っており、各製品には多数のアイテムがあります。私は、製品内のすべてのアイテムのチェックリストを表示したいが、製品自体がチェックされている場合にのみ表示する。

私は次のコードを試してみました。これは、初期値に基づいて項目を表示または非表示にしています。チェックボックスのオンとオフを切り替えて、アイテムを非表示にすることができます。

<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は、チェックされた正しい場合は真を返すことはありませんか？あなたはあなたを参照し、そこにcheckedを確認する必要があります。

例えば（あなたのMD-チェックボックスコンポーネントが設定されている方法に応じて）：

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