首页 > 解决方案 > 需要为过滤器再添加一列“姓氏”。如果在下面的代码中的数据源中可用。角度数据表

问题描述

private performFilter(filterBy: string) {    
filterBy = filterBy.toLocaleLowerCase();
    --- returning value
        return this.dataSource.filter(
          (data: any) =>
           data.FirstName ? data.FirstName.toLocaleLowerCase().indexOf(filterBy) !== -1 : ""
        );
 }

标签: javascriptangulartypescript

解决方案


所以我知道你想要做的是根据下面的值过滤一些数组,如下例所示:

操场

class Foo {
    public dataSource: {
        FirstName: string;
        LastName: string;
    }[] = [{
        FirstName: 'Obiwan',
        LastName: 'Kenobi',
        }, {
         FirstName: 'Bob',
        LastName: 'Franklin',
    }, {
         FirstName: 'Anakin',
        LastName: 'skywalker',
    }];

    public performFilter(filterBy: string) {
        const toFilterBy = filterBy.toLocaleLowerCase();

        return this.dataSource.filter((data) => {
            // Check for FirstName
            if (data.FirstName && data.FirstName.toLocaleLowerCase().indexOf(toFilterBy) !== -1) {
                return true;
            }

            // Check for LastName
            if (data.LastName && data.LastName.toLocaleLowerCase().indexOf(toFilterBy) !== -1) {
                return true;
            }

            return false;
        });
    }
}

const foo = new Foo();

console.log('------- Before', foo.dataSource);

console.log('------- After', foo.performFilter('Obiwan'));


现在我们可以看到一个重复的模式,我们可以概括:

操场

type DataSource = {
    FirstName: string;
    LastName: string;
};

class Foo {
    public dataSource: DataSource[] = [{
        FirstName: 'Obiwan',
        LastName: 'Kenobi',
        }, {
         FirstName: 'Bob',
        LastName: 'Franklin',
    }, {
         FirstName: 'Anakin',
        LastName: 'skywalker',
    }];

    public performFilter(filterBy: string) {
        const toFilterBy = filterBy.toLocaleLowerCase();

        return this.dataSource.filter((data: DataSource) => ([
            'FirstName',
            'LastName',
        ] as (keyof DataSource)[]).some(x => data[x] && data[x].toLocaleLowerCase().indexOf(toFilterBy) !== -1));
    }
}

const foo = new Foo();

console.log('------- Before', foo.dataSource);

console.log('------- After', foo.performFilter('Obiwan'));

推荐阅读