javascript - Angular 2 过滤

Question

我尝试在 alpha 22 版的 Angular 2 应用程序中进行过滤。我尝试了很多方法，但没有任何效果...

<table class="tabulka">
    <tr>
        <th>ID</th><th>Typ</th><th>Priorita</th><th>Aplikace</th><th>Souhrn</th><th>Hlásil</th><th>Stav</th><th>Termín</th><th>Akce</th>
    </tr>
    <tr *for="#x of datas">
        <td>{{x.ID}}</td>
        <td>{{x.Type}}</td>
        <td *if="x.Priority == 1" ><img src="./img/red.png"></td>
        <td *if="x.Priority == 0"></td>
        <td>{{x.Aplication}}</td>
        <td>{{x.Summary}}</td>
        <td>{{x.Person}}</td>
        <td>{{x.State}}</td>
        <td>{{x.Date}}</td>
        <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td>
    </tr>
</table>

求助!你如何使用 typescript 在 Angular 2 中进行过滤？

在 angular 1.4.x 中它是这样工作的:

<table class="tabulka">
    <tr ng-repeat="x in datas| filter:searchText|filter:{Aplication:search}| filter:{Person:podle}">
        <td>{{x.ID}}</td>
        <td>{{x.Type}}</td>
        <td>{{x.Priority}}</td>
        <td>{{x.Aplication}}</td>
        <td>{{x.Summary}}</td>
        <td>{{x.Person}}</td>
        <td>{{x.State}}</td>
        <td>{{x.Date}}</td>
        <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td>
    </tr>
</table>

Answer 1

在 Angular 2.0.0-beta.0 中，您需要实现一个管道，根据您的应用程序需要转换数组，

@Pipe({
  name: 'search'
})

export class SearchTextPipe implements PipeTransform {
   transform(value: any[] , args: any[]) {
     const searchText = args[0];
     const field = args[1];
     if (!searchText) {
       return value;
     }
     return value.filter ((item) => {
        if (field) {
         return item[field].includes(searchText);
       }
       return _(item)
        .values()
        .includes( searchText );
    })  
  }
}

然后你可以在其他组件中使用它:

@Component({
  ...
  pipes: [SearchTextPipe]
})

在模板中:

*ngFor="#item of list | search:searchInput:field"