角度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>

请帮忙，如何使用打字稿在角度2中进行过滤。

在角度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

在角度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"

Answer 2

你必须写* 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>

Answer 3

我玩了下面的代码。我正在寻找相同的搜索功能。但是现在这符合我的需求。还是想找到一种让管道动态的方法。也许你找到了这个的解决方案。

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

Answer 4

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

TextChanged(searchText){
    var filteredList = [];
    For(let item of this.oldList){
        If(item.contains(seaechText))
            FilteredList.push(item);
        }
    This.oldList = filteredList;
    }
}

Answer 5

转到控制台并键入

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

Usage

现在，您可以按照以下步骤使用过滤器

// 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数组

• 你好
• 嗨，你好