Question

我使用有角度的材质作为UI框架，并使用芯片组件。我过滤数据（对象数组），并且效果很好。第一个芯片条目从数据库中获取数据，其余芯片过滤数据。如果要删除芯片，应再次显示原始数据。

我有两个主要功能add（）和remove（）。通过添加，我将芯片添加到列表中并过滤数据。在remove（）函数中，我正在使用filter（）和every（）帮助器，但是every（）帮助器不会遍历我的芯片列表，返回的值为空

search data: any;
searchDataTmp: any;
searchDataReqTmp: any;
searchFieldValue: any;

add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    if ((value || '').trim()) {
      this.searchFieldData.push({ name: value.trim() });

      if (this.searchFieldData.length > 1) {
        this.filterData(value);
      } else {
        this.requestData(value);
      }
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

  filterData(item) {
    this.searchData = this.searchData.filter((val) => {
        return val.description.toLowerCase().includes(item.toLowerCase());
    });
  }
  requestData(inputValue) {
    this.loading = true;
    this.apiService.callDataFromSource(inputValue).subscribe((item: any) => {
      this.searchDataReqTmp = item;
      this.searchData = this.searchDataReqTmp;
      this.loading = false;
    });
}


  remove(data: any): void {
    // e.g. this.searchFieldData = ['BarackObama', 'Trump'];
    const index = this.searchFieldData.indexOf(data);

    if (index >= 0) {
      this.searchFieldData.splice(index, 1);
    }

    if (this.searchFieldData.length > 0) {
      this.searchData = this.searchDataReqTmp.filter((val) => {
        return this.searchFieldData.every((item) => {
          return val.description.toLowerCase().includes(item.name.toString().toLowerCase());
        });
      });
    } else {
      this.searchData = this.searchDataTmp;
    }
  }

HTML

  <mat-form-field class="search-field">
    <mat-chip-list #chipList>
      <mat-chip *ngFor="let inp of searchFieldData" [selectable]="selectable" [removable]="removable"
        (removed)="remove(inp)">
        {{inp.name}}
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      </mat-chip>
      <input placeholder="Keyword..." [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)">
    </mat-chip-list>
  </mat-form-field>

问题是什么，为什么我的remove（）函数不起作用？

我的数据看起来像this

解决方案

  remove(data: any): void {

    const index = this.searchFieldData.indexOf(data);

    // Deleting chips
    if (index >= 0) {
      this.searchFieldData.splice(index, 1);
    }


    // Data from requested data and filtering
    if (index > 1) {
      this.searchData = this.searchDataReqTmp.filter((val) => {
        return val.description.toLowerCase().includes(this.searchFieldData[index - 1].name.toLowerCase());
      });
    }

    // Data from first request
    if (index === 1) {
      this.searchData = this.searchDataReqTmp;
    }

    // Data from first initialising - ngOnInit()
    if (index === 0) {
      this.searchData = this.searchDataTmp;
    }
  }

使用过滤器和每个删除数组中的对象

0 个答案: