如何在angular 2中保留搜索复选框

必须使用两个变量:“labels”和“labelsShow”

检查“标签”的属性

labels = [
    {id: 1, name: "Test",checked:false},
    {id: 2, name: "Testing",checked:false}
  ];

更改(更改)功能

<input type="checkbox" [checked]="data.checked"
       (change)="data.checked=$event.target.checked">
       {{data.name}}

更改搜索功能

search(searchterm): void {
    this.labelsShow=this.lables.filter(function(tag) {
      return tag.name.toLowerCase().indexOf(searchterm) >= 0;
    });

加入ngOnInit呼叫seach

this.search("")

并在LabelShow上迭代

<div *ngFor="let data of labelsShow">
     ...
</div>

您可以询问如何工作,如果我更改“LabelShow”,则“labels”会发生更改。这是因为标签通过引用显示副本。您可以看到在html中添加的实际操作

<p>
{{labelsShow|json}}
</p>
{{labels|json}}

::glups::与Pengyy的答案几乎相同

首先,您需要保存 checked 每个复选框的状态及其数据。

<div *ngFor="let data of labels_display">
  <input type="checkbox" (change)="onSelect(data.id, $event.target.checked)" [checked]="data.checked">
  {{data.name}}
</div>


labels = [
  {id: 1, name: "Test", checked: false},
  {id: 2, name: "Testing", checked: false}
];

那么,你需要 同步的 数据介于 labels_display (用于显示)和 labels (原始数据)

onSelect(data: number, isChecked: boolean) {
  ...

  // keep sync between labels and labels_display
  const item = this.labels.find(item => item.id === data);
  item.checked = isChecked;
}

请参见固定 demo 。