Angular 2 使用管道过滤数据

Question

我必须过滤来自数据库的页面上的大量信息。我需要按 town/county、停车场、县过滤它，它需要有一个自定义搜索字段。

进来的信息类型是这样的

[{
            "img-src": "../assets/img/admiralhouse.jpg",
            "name": "Admiral House",
            "town": "Fareham",
            "county":"Hampshire",
            "address": {
                "firstline":"Admiral House",
                "secondline":"43 High Street"
            },
            "parking":"Only on road",
            "contact":{
                "name":"Donna Robinson",
                "email":"donna.robinson@monkies.org.uk",
                "phone":"02392793000"
            }

        },
        {
            "img-src": "../assets/img/allendalehouse.jpg",
            "name": "Allendale House",
            "address": {
                "firstline":"Allendale House",
                "secondline":"Hanham Road",
                "town": "Wimborne",
                "county":"Dorset"
            },
            "parking":"Only on road",
            "contact":{
                "name":"Donna Robinson",
                "email":"donna.robinson@monkies.org.uk",
                "phone":"02392793000"
            }
        },
         {
            "img-src": "../assets/img/basepoint.jpg",
            "name": "Basepoint",
            "address": {
                "firstline":"Basepoint Business Centre",
                "secondline":"1 Winnall Valley Road",
                "town": "Winchester",
                "county":"Hampshire"
            },
            "parking":"Only on road",
            "contact":{
                "name":"Donna Robinson",
                "email":"donna.robinson@monkies.org.uk",
                "phone":"02392793000"
            }
        }
        ];

根据这些信息，我需要能够对其进行过滤，以便我只能带回某些信息到多个领域，我如何从管道的输入中获取信息？

我的输入类型页面

import {Component} from 'angular2/core';
import {VenuesService} from './venues.service';
import {Pipe} from 'angular2/core';

@Pipe ({
    name:'search'
})
export class SearchPipe {
     transform(value) {
    return value.filter((item)=> item == ('bye'));
}
} 




@Component({
    selector: 'venues',
    template: `

    <h1> Venues </h1>

    <div id="filters">

        <p class="selecttitle">search:</p>
        <input type="text" placeholder="search venues">


        <h5 class="selecttitle"> Town/city: </h5>

        <select>
                <option value="All towns/cities">All towns/cities</option>

                <option value="Alton">Alton</option>
                <option value="Brockenhurst">Brockenhurst</option>
                <option value="Dorchester">Dorchester</option>
                <option value="Fareham">Fareham</option>
                <option value="Havant">Havant</option>
                <option value="Milton Keynes">Milton Keynes</option>
                <option value="Old Trafford">Old Trafford</option>
                <option value="Portsmouth">Portsmouth</option>
                <option value="Wimborne">Wimborne</option>
                <option value="Winchester">Winchester</option>



        </select>

        <h5 class="selecttitle"> County: </h5>

        <select>
                <option value="All Counties">All towns/cities</option>

                <option value="Buckinghamshire">Buckinghamshire</option>
                <option value="Doreset">Doreset</option>
                <option value="Greater Manchester">Greater Manchester</option>
                <option value="Hampshire">Hampshire</option>


        </select>

        <h5 class="selecttitle"> Car parking availability: </h5>

        <select>
                <option value="any">Any</option>
                <option value="Onsite car park">Onsite car park</option>
                <option value="Only on road">Only on road</option>
                <option value="none">none</option>



        </select>



    </div>

    <div id="venues">

     <ul>
        <li *ngFor="#venue of venues"> {{ venue.name }}
        </li>
     </ul>

    </div>






`,
providers:[VenuesService],
pipes:[SearchPipe],


})

抱歉，这是一大段代码，但我希望您能获得所需的任何信息。所以几乎如何在 Angular 2.

中进行适当的过滤

Answer 1

在你的管道中，我们将接收数组作为你的情况（第一个）的参数，你可以按照你的方式过滤这个数组：

@Pipe ({
  name:'search'
})
export class SearchPipe {
  transform(value) {
    return value.filter((item)=> {
      // for example
      return item.name === 'something'
         && item.address.county === 'something else';
    });
  }
}

如果你想利用表单到过滤器，你可以利用transform方法的第二个参数：

@Pipe ({
  name:'search'
})
export class SearchPipe {
  transform(value, params) {
    var input1Val = params[0];
    var input2Val = params[1];

    return value.filter((item)=> {
      // for example
      return item.name === input1Val
         && item.address.county === input2Val;
    });
  }
}

您可以通过这种方式提供这些参数：

<div *ngFor="#venue of venues | search:input1:input2">(...)</div>

Angular 2 使用管道过滤数据

Angular 2 filtering data using pipes

angular2-forms

angular