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

我只是想知道在我的情况下，在Angular2中使用管道的最佳方法是什么，尽管我的解决方案很有效

让我们开始吧。
我有这个json数组

我的烟斗

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，因为我是根据这个从API获取数据的

第二，我返回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>

名称：{{user.Name}
用户名：{{user.Username}
电子邮件：{{user.Email}

---

那个么，你们觉得呢？

当

值

为

未定义时，不需要返回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;
    }
}

至于您的问题，当
值
为
未定义
时，您可以使用
div
包围
*ngFor
，该div的值为
*ngIf
，因此只有当
用户列表
未定义

时，才会呈现该值

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

名称：{{user.Name}
用户名：{{user.Username}
电子邮件：{{user.Email}

---

希望这有帮助。

很好，它有帮助！我认为你混淆了价值和用户。在管道中，一旦“value”是参数的名称，它就应该返回值。除此之外，它还发挥了魅力。感谢you@TiagoMatos很高兴听到：）如果你的问题解决了，就接受答案来结束问题。

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