x.component.htmlに次のように私は、ブートストラップカードのリストを移入するオブジェクトのリストを持っている4

Question

角要素のリストから選択された要素のオブジェクトを取得する：

<div *ngFor="let item of items | async"> 
    <div class="row"> 
     <div class="col-lg-6"> 
       <div class="card card-accent-primary"> 
        <div class="card-header"> 
              {{item.name}} 
         <label class="switch switch-text switch-pill switch-primary float-right mb-0"> 
          <input class="switch-input" type="checkbox" (change)="onSwitchItem($event)"> 
          <span class="switch-label"></span> 
          <span class="switch-handle"></span> 
         </label> 
        </div> 
        <div class="card-body"></div> 
       </div> 
     </div> 
    </div> 
</div> 

私はアイテムを取得したいです選択された。 x.component.tsにアイテムオブジェクトを取得する方法はありますか？

私の現在の実装では、角度プロパティバインディング[id]="item.index"を使用してインデックスを割り当て、インデックスを使用してitems配列にアクセスしています。

Answer 1

次のように実装できます。追加された子コンポーネントのトラックを「保持」する配列を反復処理します。チェックボタンを押すと、新しい要素を配列に追加した後、ngForが再度反復して新しい子コンポーネントをDOMに追加します。

親コンポーネント：

HTML

<div *ngFor="let item of items | async"> 
    <child-card [item]=item></child-card> 
</div> 

活字体：

child = []; 

    add() { 
    this.childs.splice(0,0,this.childs.length+1); 
    } 
} 

子コンポーネント：

HTML

<div class="row"> 
     <div class="col-lg-6"> 
       <div class="card card-accent-primary"> 
        <div class="card-header"> 
              {{item.name}} 
         <label class="switch switch-text switch-pill switch-primary float-right mb-0"> 
          <input class="switch-input" type="checkbox" (change)="onSwitchItem($event)"> 
          <span class="switch-label"></span> 
          <span class="switch-handle"></span> 
         </label> 
        </div> 
        <div class="card-body"></div> 
       </div> 
     </div> 
    </div> 

活字体

import { Input } from '@angular/core'; 

@Component({ 
    selector: 'card-child', 
    .... 
} 
.... 
export class cardChildComponent { 
    @Input() item; 
.... 
    } 

Plunker