Angular | Обновление таблицы соответствия новым массивом данных с фильтром

Question

Я использую фильтр только для отображения данных в таблице соответствия в соответствии с фильтром.

В моем случае у меня есть mat-таблица, в которую я вставляю массив с объектами в нем.

Функция при фильтрации массива данных:

import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material';

@ViewChild('TABLE') table: MatTable<any>;

dataSource: CandidateDataSource | null;


filterTableFunction(form) {

   let result = this.dataSource.data.filter(obj => {

        if (form.userValidation === true) {
            return obj.candidateState === 'userValidation';
        }

    });

    this.dataSource.filteredData = [...this.result];
    this.table.renderRows();

    console.log('I am new datasource', this.dataSource.filteredData);
    console.log('I am result', result);
 }

С моей консоли я вижу, что новый отфильтрованный массив корректен, однако моя таблица не обновляется новым массивом ,

Я также попытался сделать «результат» глобальной переменной, но безуспешно.

РЕДАКТИРОВАТЬ:

Первый ответ, к сожалению, не решил мою проблему.

Новый код:

// public
public result = [];

filterTableFunction(form) {

     console.log('#1', this.dataSource.data); //logs an array of objects

    this.result = this.dataSource.data.filter(obj => {

            if (form.userValidation === true) {
            return obj.candidateState === 'userValidation';
        }

   });

   console.log('#2' , this.result); // New array containing the objects with candidateState === 'userValidation'

    this.dataSource.data = [...this.result];

    this.table.renderRows();

   console.log('#3', this.dataSource.data) // Shows replaced array from above line with the correct result

 }

Answer 1

С помощью ответа MichealID я получил следующее решение:

Функция фильтра в component.ts

public result = [];


async submitFilter(form) {

    this.result = this.dataSource.filteredData.filter(obj => {
        if (form.userValidation === true) {
            return obj.candidateState === 'userValidation';
        }

    });

    const resultValues = this.result.map(r => r.candidateState);

    this.dataSource.filter = resultValues[0];

    console.log(this.dataSource.filteredData);
}

В моем datasource.ts:

 // Private
 private _filterChange = new BehaviorSubject('');
 private _filteredDataChange = new BehaviorSubject('');

 constructor( private _candidateService: CandidateService){
    this.filteredData = this._candidateService.candidateData;
 }

// Filtered data
get filteredData(): any {
    return this._filteredDataChange.value;
}

set filteredData(value: any) {
    this._filteredDataChange.next(value);
}

// Filter
get filter(): string {
    return this._filterChange.value;
}

set filter(filter: string) {
    this._filterChange.next(filter);
}

filterData(data): any {
    if (!this.filter) {
        return data;
    }
    return FuseUtils.filterArrayByString(data, this.filter);
}

* 1008 Итак, я нахожусь в глубокой воде, но я сделал хак, чтобы получить значениеандидат в моем массиве и перенести это строковое значение в мой фильтр, который затем отфильтровывает все объекты, содержащие это значение. Я не думаю, что это хорошее решение, так как я могу проверить только одну вещь здесь, а не несколько фильтров, таких как "андидатское состояние "и пример" зарплата ". Сейчас я работаю и показываю мне все объекты со значением, которое я хотел. Спасибо MichealID за вашу помощь.

Answer 2

1. result переменная перезаписывается старыми значениями.
2. Оператор распространения может не потребоваться, поскольку this.dataSource.data уже является массивом.

Попробуйте следующее

filterTableFunction(form) {
  const result = this.dataSource.data.filter(
    obj => { 
      if (form.userValidation === true) {
        return obj.candidateState === 'userValidation';
      }  
    }
  );

  this.table.renderRows();
}

Если вам необходимо создать массив значений ключа candidateState от объекта, вы можете использовать map().

// resultValues = ['userValidation', 'userValidation', 'userValidation', ...]
const resultValues = result.map(r => r.candidateState);

Рабочий пример: Stackblitz