筛选表的ToolBar

Question

我有一个从a中获取数据的user[]对象，我试图基于fullName(对象的属性)过滤数据，在keyup.enter上它调用filterUser() function.This是我编写筛选逻辑的地方。数据得到一个过滤器，但角不能渲染它，我不知道我做错了什么。

我将过滤后的数据保存在类型为filterData的对象User[]中。

User-list.html

​

<div *ngIf="users?.length > 0">
<div> <input type="text" (keyup.enter)="filterUser($event)"> </div> <!--function triggering here-->
<div *ngFor="let item of items">
{{item.attribute.fullName}}
</div>
</div>

​

User-list.component.ts

​

// assuming users has some data
items: User[]
filterData: User[];
 filterUser( searchTerm: string) {
    this.filterCount = 0;
    console.log('searchTerm', searchTerm);
    console.log(typeof(this.items));
    if (!this.items || !searchTerm) {
      return this.items;
    }
    for (let i = 0; i < this.items.length; i++) {
      if (this.items[i].attributes.fullName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {         this.filterData[i].attributes.fullName = this.items[i].attributes.fullName;
        this.filterCount++;
      }
    }
    this.items = this.filterData;// I'm not able to copy data back to this.items
  }

​

我不知道我错过了什么。我需要使用ngOnChanges()吗？

Answer 1

您可以通过创建自定义管道来过滤它。

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        searchText=searchText
        if(!items){ return ;}
        if(!searchText){
            return items;
        }
        return items.filter( it => {
            return it['fullName'].toLowerCase().includes(searchText);
        });
    }
}

在app.module.ts文件中注册管道

import {
  FilterPipe
} from 'PipePath'; //give the path of custom created pipe

declarations: [...,FilterPipe],

user-list.html

<div *ngIf="users?.length > 0">
<div> <input type="text" (keyup.enter)="filterUser($event)" [(ngModel)]="search"> </div>
<div *ngFor="let item of items | filter : search">
{{item.attribute.fullName}}
</div>
</div>

当我们使用ngModel时，在ts文件中声明搜索变量。

user-list.ts

search;

这会解决你的问题。

Answer 2

将匹配项复制到filteredData列表时出错。下面是使用副本的一种可能的解决方案：

​

class Test {
    // assuming users has some data
    constructor() {
        this.items = [
            { attributes: { fullName: 'toto1' } },
            { attributes: { fullName: 'toto2' } },
            { attributes: { fullName: 'tutu3' } }
        ];
        this.filterData = [];
    }
    filterUser(searchTerm) {
        this.filterCount = 0;
        console.log('searchTerm', searchTerm);
        console.log(typeof (this.items));
        if (!this.items || !searchTerm) {
            return this.items;
        }
        for (let i = 0; i < this.items.length; i++) {
            if (this.items[i].attributes.fullName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
                this.filterData[i] = { ...this.items[i] }; // Copy full object using spread operator
                this.filterCount++;
            }
        }
        this.items = this.filterData;// I'm not able to copy data back to this.items
    }
}
let test = new Test();
test.filterUser('toto');
console.log(test.items);

​