動的にチェックボックスを作成し、角2のすべての選択されたチェックボックスの値を取得する方法

Question

これは私のhtmlです。

selectedItems: any = []; 
search(category, event) { 

    // set selectedItems here 
} 

Answer 1

私はこのような問題を解決しました：https://plnkr.co/edit/mWtlkydF0FzioS3c2esQ?p=preview

@Component({ 
selector: 'my-app', 
template: ` 
<div class="checkbox checkbox-primary" *ngFor="let category of categories; let i = index"> 
    <input type="checkbox" id="checkbox_category_{{i}}" (change)="search(category, $event)" /> 
    <label> {{category?.name }} </label> 
</div> 

<b>selectedItems</b>: {{selectedItems | json}} 
`, 
}) 
export class App { 
    name:string; 
    categories: any; 
    selectedItems: any = []; 

    constructor() { 
    this.name = 'Angular2'; 
    this.getDate(); 
    } 

    //this data may come from api 
    getDate(){ 

    this.categories = [ 
     {name: 'ferrari', price: 123}, 
     {name: 'porche', price: 456}, 
     {name: 'bentley', price: 789} 
     ]; 
    } 

    search(category, event) { 

     var index = this.selectedItems.indexOf(category.name); 
     if (event.target.checked) { 
      if (index === -1) { 
       this.selectedItems.push(category.name); 
      } 
     } else { 
      if (index !== -1) { 
       this.selectedItems.splice(index, 1); 
      } 
     } 
     console.log(this.selectedItems); 
    } 
} 

Answer 2

あなたが行うことができます：私は（変更）イベントが

<div class="checkbox checkbox-primary" *ngFor="let category of categories; let i = index"> 
    <input type="checkbox" id="checkbox_category" (change)="search(category, $event)" /> 
</div> 

を解雇した。これは、角2コンポーネントの私の検索方法で任意のチェックボックスがオンまたはオフされたとき、すなわち、選択したすべてのチェックボックスの値を取得したいですこのような何か： https://plnkr.co/edit/94Gubz?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="checkbox checkbox-primary" *ngFor="let category of categories; let i = index"> 
    <input type="checkbox" id="checkbox_category" [checked]="category.selected" (click)="select(i)" /> {{category.value}} 
</div> 
    `, 
}) 
export class App { 
    categories: any; 
    selected: any; 

    constructor() { 
    this.categories = [ 
     {value: 'ferrari', selected: false }, 
     {value: 'porche', selected: false }, 
     {value: 'bentley', selected: false } 
     ]; 
     } 

    select(index) { 
    this.categories[index].selected = !this.categories[index].selected 
    } 

    search() { 
    this.selected = this.categories.filter(cat => cat.selected) 
    } 

}