Angular2,使用两个输入来过滤数据

时间:2016-07-23 11:33:00

标签: html angular

我在这个小项目上遇到了麻烦。 我想在我的html上输入两个输入,他们必须从数据库中过滤一些数据。我做了一个过滤器(它工作),但我不知道如何制作第二个过滤器。 (对不起,我的档案中没有使用英语,我希望它不会打扰你)。 这是我得到的:

html文件

<div class="container">
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Broj Kreveta" [(ngModel)]="broj_kreveta">
            <input type="text" class="form-control" placeholder="Broj Kvadrata" [(ngModel)]="broj_kvadrata">
        </div>
    </form>
    <div class="col-lg-12">
        <br/>Rooms<br/> <br/>
        <div *ngFor="#soba of sobe | SearchPipe:broj_kreveta">
            ID room: {{soba.id}}
            <br/>
            Category: {{soba.kategorija}}
            <br/>
            Room number: {{soba.broj_sobe}}
            <br/>
            Number of beds: {{soba.broj_kreveta}}
            <br/>
            sqm: {{soba.broj_kvadrata}}
            <br/><br/>
        </div>
    </div>
</div>

search.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'SearchPipe'
})

export class SearchPipe {
    transform (value, [queryString]) {
        if (value == null) {
            return null;
        }
        console.log('transform');
        return value.filter(item=>item.broj_kreveta.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
    }
}

1 个答案:

答案 0 :(得分:1)

您可以在管道中设置booth参数:

TypeError: Cannot read property 'includes' of undefined

和管道定义:

{{ myData | myPipe: arg1:arg2:arg3... }}