Angular2 管道过滤器名称最佳方法

Question

只是想知道在我的情况下在 Angular2 中使用 PIPE 的最佳方法是什么，尽管我的解决方案运行良好。

让我们开始吧。
我有这个 json 数组 https://jsonplaceholder.typicode.com/users

我的管道

transform(value: any, name: any): any
{
    if (value == null) {
        return null;
    }

    if (name == null) {
        return value;
    }

    return value.filter(user => {
        return user.name.indexOf(name) != -1
    });
}

首先，当值为 null 时，我 return null 因为我正在根据此 .

从 API 获取数据

if (value == null) {
    return null;
}

其次，我returnnull，因为我要的是原始数据，不过滤。

if (name == null) {
    return value;
}

最后，我根据用户在输入中输入的内容过滤 ngFor 中的结果。

user.name.indexOf(name) != -1

过滤数据的输入

<input type="text" [(ngModel)]="userSearch">

我的 ngFor

<div class="list-item" *ngFor="let user of (usersList | filterPipe:userSearch)">
    <div><strong>Name:</strong> {{ user.name }}</div>
    <div><strong>Username:</strong> {{ user.username }}</div>
    <div><strong>Email:</strong> {{ user.email }}</div>
    <hr>
</div>

那么，你们怎么看呢？

Answer 1

当 value 为 undefined 时，无需 return null：在您的管道中，您可以执行以下操作：

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

@Pipe({
    name: 'search',
    pure: false
})
@Injectable()
export class SearchPipe implements PipeTransform {
    transform(value: any[], name: any, caseInsensitive: boolean): any {
        if (name !== undefined) {
            // filter users, users which match and return true will be kept, false will be filtered out
            return users.filter((user) => {
                if (caseInsensitive) {
                    return (user.name.toLowerCase().indexOf(name.toLowerCase()) !== -1);
                } else {
                    return (user.name.indexOf(name) !== -1);
                }
            });
        }
        return users;
    }
}

至于你的问题，当 value 是 undefined 时，你可以用一个 div 包围你的 *ngFor，它的值是 *ngIf，所以只有当 userList 不是 undefined.

时才会呈现

<div *ngIf="usersList">
    <div class="list-item" *ngFor="let user of (usersList | search:userSearch:true)">  
        <!-- true is added for case insensitive search -->
        <div><strong>Name:</strong> {{ user.name }}</div>
        <div><strong>Username:</strong> {{ user.username }}</div>
        <div><strong>Email:</strong> {{ user.email }}</div>
    <hr>
    </div>
</div>

希望对您有所帮助。

Angular2 管道过滤器名称最佳方法

Angular2 Pipe filter by name best approach

angular2-pipe

angular