Javascript 角度|使用带过滤器的新数据数组更新mat表

我正在使用一个过滤器，仅根据过滤器在mat表中显示数据

在我的例子中，我有一个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);
 }

result

变量被旧值覆盖

可能不需要Spread运算符，因为此.dataSource.data已经是一个数组

请尝试以下方法

filterTableFunction（表单）{
const result=this.dataSource.data.filter(
obj=>{
if（form.userValidation==true）{
返回obj.candidateState==='userValidation'；
}  
}
);
this.table.renderRows（）；
}

如果需要从对象构造

candidateState

键的值数组，可以使用

//结果值=['userValidation'，'userValidation'，'userValidation'，…]
constresultvalues=result.map（r=>r.candidateState）；

---

工作示例：

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

在my 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);
}

---

所以，我现在在深水区，但我做了“hack”来获取数组中的candidateState值，并将该字符串值放入我的过滤器，然后过滤器将过滤掉包含该值的所有对象。我认为这不是一个好的解决方案，因为我在这里只能检查一件事，而不能检查多个过滤器，如“候选测试”和示例“薪水”。我现在确实在工作，并以我希望的值显示所有对象。谢谢米切利德的帮助

你能告诉我你在哪里记录输出吗？@MichaelD我更新了我的帖子。这是对你问题的回答吗？我还看到你将

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

替换为

this.dataSource.filteredata=[…this.result]。请您将代码发布到使用
result
更新表格的位置好吗？@MichaelD请参阅新编辑如果是这样，您可能需要发布更多信息。你能把HTML贴出来吗？
 // 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);
}