2

只是想知道在我的情况下在 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 时返回 null，因为我根据无法读取角度 2 中 null 的属性“过滤器”从 API 获取数据？.

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

其次，我返回 null 因为我首先想要原始数据而不进行过滤。

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>

那么，你们怎么看？

4

1 回答 1

1

valueis时无需返回 null undefined：在您的管道中，您可以执行以下操作：

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，你可以用具有价值*ngFor的 a包围你，所以只有在div不是时才会呈现。*ngIfuserListundefined

<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>

希望这可以帮助。

于 2016-07-29T05:07:06.733 回答