如何動態創建複選框並獲取所有選中的複選框的角度值2

Question

這是我的html。我想所有選定的複選框的值時，任何複選框被選中或取消選中即（其他城市）觸發的事件

<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組件我的搜索方法：

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

你可以做是這樣的： 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) 
    } 

}