Angular2 - 検査時に配列にチェック値をプッシュ

Question

従業員レコードのオブジェクトを受け取ってテーブルに表示するコンポーネントがあります。各レコードには、次のプロセスに含める従業員を「選択」できるチェックボックスがあります。このコンポーネントで

<tr *ngFor="let i of importResults" > 
<td> 
    <input type="checkbox" 
     value="{{ i.QID }}" 
     attr.data-employeename="{{ i.PreferredName }} {{ i.LastName }}" 
     [checked]="isSelected" /> 
    </td> 
    <td>{{ i.PreferredName }} {{ i.LastName }}</td> 
</tr> 

、私は配列selectedEmployees = [];を作成し、私の目標は、私は、チェックボックスをクリックすると、その値が配列にプッシュされるだけでなく、私はそれをオフにする場合、値が配列から削除されていることです。

ngModelを2 way bindingにしようとしましたが、このデータにはオブジェクトの初期チェック値がないため、正常に動作しませんでした。

これを達成する最も良い方法はngModelですか？たぶん私はそれについて間違った方向に行っていたのかもしれません。

this questionに従ってみましたが、typescriptは.entriesが無効であるとエラーを送出しました。それは、角度の古いバージョンのされている可能性があります？

Answer 1

チェックボックスにclickイベントを追加し、追加または削除を処理する関数に渡すことができます。

HTML：

<div *ngFor="let i of importResults" > 
<div> 
    <input type="checkbox" 
     value="{{ i.QID }}" 
     (click)="change(i)"/> 
    <span>{{ i.PreferredName }} {{ i.LastName }}</span> 
    </div> 
</div> 

<p> Selected Employee: {{selectedEmployees | json}} </p> 

component.ts：

export class SelectFormExample { 
    selectedEmployees = []; 

    showSiblingComp = false; 

    importResults = [ 
    {QID: "1", PreferredName: 'Steak', LastName: "Pizza"}, 
    {QID: "2", PreferredName: 'Cheese', LastName: "Burger"}, 
    {QID: "3", PreferredName: 'Chicken', LastName: "Panini"} 
    ]; 

    constructor(private service: SharedService){ 

    } 

    change(obj){ 

    let updateItem = this.selectedEmployees.find(this.findIndexToUpdate, obj.QID)); 

    let index = this.selectedEmployees.indexOf(updateItem); 

    console.log(index); 

    if(index > -1){ 
     this.selectedEmployees.splice(index, 1); 
    } 
    else{ 
     this.selectedEmployees.push(obj); 
    } 

    this.service.setList(this.selectedEmployees); 

    } 

    findIndexToUpdate(obj) { 
     return obj.QID === this; 
    } 
} 

demo

Iは、共有サービスを介し兄弟成分とselectedEmployeesを共有含むようにデモを拡張しました。