Angular2フィルターデータ一覧から

Question

私はtypescriptでangular2アプリケーションを開発しています。 入力テキストボックスに対応するユーザをフィルタリングする必要があります。データ

Input text box

Result

HTMLテーブルビューusers.html

<tr *ngFor='let user of Users'> 
     <td> 
      <img [src]='user.imageUrl' [title]='user.userName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'> 
     </td> 
     <td>{{ user.userName }}</td> 
    </tr> 

ユーザーリストuser-list.componet.ts

をフィルタリングした後

表user.ts

export interface User { 
    userId: number; 
    userName: string; 

} 

export class UserListComponent implements OnInit { 
    imageWidth: number = 50; 
    imageMargin: number = 2; 
    users: User[] = [ 
     { 
      "productId": 2, 
      "productName": "Njjosgaaj", 
     } 
    ]; 

    ngOnInit(): void { 
     console.log('In OnInit'); 
    } 
} 

ユーザーインターフェイスは、私は、この使用してangular2カスタムパイプの開発を試みました。 私は開発について疑問に思っていますか？ この機能を開発する最善の方法は何ですか？

Answer 1

フィルタユーザーに角カスタムパイプを使用できます。

この種類のフィルタにコードを追加してみてください。

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

import { User } from './user'; 

@Pipe({ 
    name: 'productFilter' 
}) 
export class UserFilterPipe implements PipeTransform { 

    transform(value: User[], filterBy: string): User[] { 
     filterBy = filterBy ? filterBy.toLocaleLowerCase() : null; 
     return filterBy ? value.filter((user: User) => 
      user.userName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value; 
    } 
} 

が変更HTMLビュー

<tr *ngFor='let user of Users | userFilter:listFilter '> 
     <td> 
      <img [src]='user.imageUrl' [title]='user.userName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'> 
     </td> 
     <td>{{ user.userName }}</td> 
    </tr>