Question

我有一个搜索框和一组复选框，如下所示：

<input type="text" placeholder="Enter Category" [(ngModel)] = "searchTerm" (ngModelChange) = "search(searchTerm)">
      <div *ngFor="let data of labels">
            <input type="checkbox" (change)="onSelect(data.id, $event.target.checked)">
            {{data.name}}
      </div>

我有onSelect和搜索功能，如下面的ts文件所示：

onSelect(data: string, isChecked: boolean) {
  this.selectedArray = <FormArray>this.Form.controls.selected;

  if(isChecked) {
    this.selectedArray.push(new FormControl(data));
  } else {
    let index = this.selectedArray.controls.findIndex(x => x.value == data)
    this.selectedArray.removeAt(index);
    }
  }

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

现在我面临的问题是，当我勾选复选框并搜索不存在的字词然后清除搜索字词时。在这样做时，我检查的复选框不会保持其状态。

编辑： 克隆的应用https://stackblitz.com/edit/angular-ck8uvj。现在，如果我检查测试，然后我搜索m关键字。我再次清除了我的搜索框。我检查过的复选框没有保留。

Answer 1

首先，您需要保存每个复选框的public function index() { $client = new Client(); $hospital_id = 37; $res = $client->request('POST', 'http://vph.com/api/GetService/'.$hospital_id,[ 'form_params' => [ 'body'=>$hospital_id ] ]);状态及其数据。

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

查看已修复的 demo 。

Answer 2

您必须使用两个变量：＆＃34;标签＆＃34;和＆＃34; labelsShow＆＃34;

制作＆＃34;标签＆＃34;检查了财产

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("")

迭代标签显示

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

你可以问一下如何工作，如果我改变＆＃34; labelsShow＆＃34;，＆＃34;标签＆＃34;有变化。这是因为labelsShow通过引用进行复制。您可以在html

中添加操作

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

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

如何在角度2中搜索带有搜索的复选框

2 个答案: