Angular2 从列表中过滤数据

Question

我正在使用 typescript 开发 angular2 应用程序。我需要通过对应于输入文本框来过滤用户。

过滤数据后的表格

Input text box

Result

HTML 表格 View users.html

<tr *ngFor='let user of Users'>
        <td>
            <img [src]='user.imageUrl' [title]='user.userName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'>
        </td>
        <td>{{ user.userName }}</td>
    </tr>

用户列表user-list.componet.ts

export class UserListComponent implements OnInit {
    imageWidth: number = 50;
    imageMargin: number = 2;
    users: User[] = [
        {
            "productId": 2,
            "productName": "Njjosgaaj",
        }
    ];

    ngOnInit(): void {
        console.log('In OnInit');
    }
}

用户界面 user.ts

export interface User {
    userId: number;
    userName: string;

}

我尝试使用 angular2 自定义管道来开发它。我想知道发展？开发此功能的最佳方式是什么？

Answer 1

您可以为过滤器用户使用 Angular 自定义管道。

尝试在您的代码中添加这种过滤器。

创建新文件作为 user-filter.ts 添加这些代码

import { PipeTransform, Pipe } from '@angular/core';

import { User } from './user';

@Pipe({
    name: 'productFilter'
})
export class UserFilterPipe implements PipeTransform {

    transform(value: User[], filterBy: string): User[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((user: User) =>
            user.userName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
    }
}

为 UserListComponent 添加 listFilter 属性

 export class UserListComponent implements OnInit {

        listFilter: string = 'cart';
        --------------
    }

更改 HTML View

<tr *ngFor='let user of Users | userFilter:listFilter '>
        <td>
            <img [src]='user.imageUrl' [title]='user.userName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'>
        </td>
        <td>{{ user.userName }}</td>
    </tr>