Блог

Я использую angular material в качестве фреймворка пользовательского интерфейса и использую компонент chip. Я фильтрую данные (массив объектов), и это работает довольно хорошо. Первая запись chip получает данные из базы данных, а остальные чипы фильтруют данные. Если я хочу удалить чип, исходные данные должны отображаться снова.

У меня есть две основные функции add () и remove (). С помощью add я добавляю чип в список и фильтрую данные. В функции remove() я использую filter() и every() helper, но помощник 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 () не работает?

Мои данные выглядят так

РЕШЕНИЕ

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