カスタムパイプ（フィルタ）が角2で機能しません

Question

私のテーブルは、私のテーブルのどのフィールドでもフィルタリングのために作成されています。検索ボックスに文字列を入力すると、コンソールに「見つかりました」が正しく表示されますが、テーブルに行は表示されません。パイプを完全に削除すると、すべて正常に動作し、テーブルにはすべてのレコードが含まれます。

import { Component, Input, OnInit } from '@angular/core'; 
import { MyTableData } from '../interfaces/my-table-data.interface' 

@Component({ 
    selector: 'my-table', 
    template: ` 
    <div style="width: 100%"> 
     <div style="float: left; height: 50px; width: 100%"> 
      Search: <input type="text" [(ngModel)]="filterValue" style="height: 30px; border: 1px solid silver"/> 
     </div> 
     <div style="float: left; width: 100%"> 
      <table> 
       <tr *ngFor="let row of data.rows | myTableFilter:filterValue"> 
        <td *ngFor="let value of row">{{value}}</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    ` 
}) 
export class MyTableComponent implements OnInit { 
    @Input() data: MyTableData; 
    filterValue: string; 

    ngOnInit() { 

    } 
} 

とパイプ：

import { Component, Injectable, Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'myTableFilter', 
    pure: false 
}) 
@Injectable() 
export class MyTableFilterPipe implements PipeTransform { 
    transform(items: any[], arg: string): any { 
     if(arg == '') return true; 

     items.filter(item => { 
      for(let value of item) { 
       if(String(value).indexOf(arg) !== -1) { 
        console.log('found match') //it prints correctly 
        return true; 
       } 
      } 
      return false; 
     }); 
    }; 
} 

よろしく

Answer 1

パイプ本当にフィルタパイプではなく、。これは入力を変更するために使用されます。この場合の入力は配列data.rowsであり、特定の入力引数filterValueに一致する行だけを表示したいとします。その場合は、trueまたはfalseの値ではなく、フィルタされた配列を返したいとします。一方、純粋なパイプなので、パイプを純粋に保つ必要があります。これは純粋なパイプです。入力が変更された場合のみ変更されます（filterValue）：

@Pipe({ 
    name: 'myTableFilter' 
}) 
@Injectable() 
export class MyTableFilterPipe implements PipeTransform { 
    transform(items: any[], filterValue: string): any { 
     if(!items) { 
      return []; 
     } 
     if(!filterValue) { 
      return items; 
     } 
     return items.filter(item => { 
      for(let value of item) { 
       if(String(value).indexOf(filterValue) !== -1) { 
        return true; 
       } 
      }    
     }); 
    }; 
}