Angular 2 filtering

Angular 2 filtering

本文关键字：filtering Angular      更新时间：2023-09-26

我试过在Angular 2的alpha 22版本中进行过滤。我已经尝试了很多方法，但都不管用。

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

请帮忙!如何在angular 2中使用typescript进行过滤?

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

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

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

进入控制台，输入

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>

所有这些将显示:

<

简单数组/strong>

  • 你好
  • 你好

json数组

  • 你好
  • 你好

你必须写*ng-for="#x of data "和*ng-if="x "。优先级== 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>

我使用了下面的代码。我在寻找相同的搜索功能。但现在这符合我的需要。仍然想找到一种方法，使管道动态。也许你能找到这个的解。

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

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

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