Question

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

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

我的PIPE

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
    });
}

首先，当value为null时，我返回null，因为我是根据此Cannot read property 'filter' of null in angular 2?从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>

那么，你们觉得怎么样？

Answer 1

value为undefined时无需返回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时，您可以*ngFor将div包围*ngIf，其价值为userList，这样就可以了仅在undefined不是<div *ngIf="usersList"> <div class="list-item" *ngFor="let user of (usersList | search:userSearch:true)">  <div><strong>Name:</strong> {{ user.name }}</div> <div><strong>Username:</strong> {{ user.username }}</div> <div><strong>Email:</strong> {{ user.email }}</div> <hr> </div> </div>时才会呈现。

 StringRequest stringRequest = new StringRequest(Request.Method.POST, URL,
        new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
                 //GET RESPONSE HERE
            }
        },
        new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                //ERROR Message
            }
        }){
    @Override
    protected Map<String,String> getParams(){
        Map<String,String> params = new HashMap<String, String>();

        // Pass POST data here [ params.put(key,value) ];
        params.put(KEY_USERNAME,username);
        params.put(KEY_PASSWORD,password);
        params.put(KEY_EMAIL, email);
        return params;
    }

};

RequestQueue requestQueue = Volley.newRequestQueue(this);
requestQueue.add(stringRequest);

希望这有帮助。

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

1 个答案: