1

我尝试在 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>

请帮忙！你如何使用打字稿在角度 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>
4

5 回答 5

4

在 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"
于 2016-01-27T05:11:19.517 回答
1

转到控制台并键入

ng generate pipe filter

然后去编辑新创建的文件（src/app/filter.pipe.ts）并替换

transform(value: any, args?: any): any {
    return null;
}

经过

transform(value: any, args?: any): any {
    if (!value || !args) return value;
    if (typeof args == "string"){
        return value.filter(item => item.toLowerCase().indexOf(args.toLowerCase()) !== -1);
    } else {
        let key = Object.keys(args)[0];
        return value.filter(item => item[key].toLowerCase().indexOf(args[key].toLowerCase()) !== -1);
    }
}

用法

现在，您可以按如下方式使用您的过滤器

// app.component.ts
list = ["Hello", "Hi and hello", "Bonjour"];
list_of_objects = [
    { id: 0, content: "Hello" },
    { id: 1, content: "Hi and hello" },
    { id: 2, content: "Bonjour" }
];

// app.component.html
<p>Simple array</p>
<ul>
    <li *ngFor="let item of list | filter:'hello' ">{{ item }}</li>
</ul>
<p>Array of JSONs</p>
<ul>
    <li *ngFor="let item of list_of_objects | filter:{ content:'hello' } ">{{ item.title }}</li>
</ul>

所有这些都将显示：

简单数组

  • 你好
  • 你好，你好

JSON 数组

  • 你好
  • 你好，你好
于 2018-03-03T18:34:34.180 回答
0

基本上，添加一个触发搜索框文本值更改的功能。在函数内部，创建一个 for 循环来添加匹配的数据。

TextChanged(searchText){
    var filteredList = [];
    For(let item of this.oldList){
        If(item.contains(seaechText))
            FilteredList.push(item);
        }
    This.oldList = filteredList;
    }
}
于 2017-01-24T20:17:27.920 回答
0

你必须写 *ng-for="#x of datas" 和 *ng-if="x.Priority == 1""

<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 *ng-for="#x of datas">
            <td>{{x.ID}}</td>
            <td>{{x.Type}}</td>
            <td *ng-if="x.Priority == 1" ><img src="./img/red.png"></td>
            <td *ng-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>
于 2015-08-31T02:15:05.277 回答
0

我玩弄了下面的代码。我正在寻找相同的搜索功能。但现在这符合我的需要。仍然想找到一种使管道动态化的方法。也许您找到了解决方案。

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'filterByDone',
    pure: false,
})

export class SearchPipe {

    transform (value, [queryString]) {
        if (value==null) {
            return null;
        }

        return value.filter((todo)=> todo.done !== '1')
    }
}
于 2016-06-01T20:52:43.240 回答