在角度 2+ 中获取动态创建的复选框的选定项目答案

【问题标题】：Get selected items of dynamically created checkbox in angular 2+在角度 2+ 中获取动态创建的复选框的选定项目
【发布时间】：2017-07-07 18:46:15
【问题描述】：

这是我的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>

这是我在 angular 2 组件中的搜索方法：

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

   // set selectedItems here
}

【问题讨论】：

标签： html angular checkbox

【解决方案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 {

  categories: any;
  selectedItems: any = [];

  constructor() {
    this.getData();
  }

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

  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);
    }
}

【讨论】：

【解决方案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)
  }

}

【讨论】：