角2過濾

Question

I'we試圖在角2應用程序來過濾版本阿爾法22 I'we嘗試過很多辦法如何做到這一點，但沒有什麼工作......

<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

你必須寫* NG-用於= 「大量的數據＃x」 和* 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 2

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

然後你才能在美國E - 這在其他組件：

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

，並在模板：

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

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

使用

現在，你可以使用你的過濾器遵循

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

和所有的將顯示：

---

簡單數組

• 你好
• Hi和你好

JSONs

• 的數組你好
• Hi和你好