獲取所選元素的對象從角元素列表4

我有填充的引導卡的列表對象的列表中x.component.html如下：獲取所選元素的對象從角元素列表4

<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數組來分配索引。

來源

2017-08-26 Maddy

你想使卡作爲一個子組件，並得到在父組件的參考？ – Vega

或者你想引用類組件中的'item'元素？ – Vega

我想通過檢查複選框（這裏有開關）將項目推入selectedItem的數組中，並取消選中。 – Maddy

您可以按如下方式實現它。迭代一個數組，以「保留」添加的子組件的軌道。然後，檢查按鈕可以觸發向數組添加新元素，然後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

來源

2017-08-26 12:37:15 Vega

獲取所選元素的對象從角元素列表4

回答

相關問題