Pipe経由で処理を呼び出す
AngularでPipeを経由して処理を呼び出しその結果を表示する方法
例えば、HTML内で配列を処理する際にある条件に合致するものしか対象としないようにする。
item.model.ts
export class ItemModel {
status : boolean;
value : string;
}
sample.component.html
<!-- listの中でstatusがtrueのものを対象とする -->
<div *ngFor="let item of list | callback : filter">{{item.value}}</div>
sample.component.ts
export class SampleComponent {
// データ一覧
list : ItemModel[];
/**
* Pipeを経由して呼び出される関数
*/
filter(item : ItemModel) : boolean {
//statusがtrueのもののみ対象とする
return item.status;
}
}
callback.pipe.ts
import { Pipe , PipeTranform } from '@angular/core';
@Pipe( {
name: 'callback',
pure: false
} )
export class CallbackPipe implements PipeTransform {
transform( items: any[], callback: (item : any ) => boolean ): any {
if (!items || !callback ) {
return items;
}
return items.filter( item => callback( item ) );
}
}
Author And Source
この問題について(Pipe経由で処理を呼び出す), 我々は、より多くの情報をここで見つけました https://qiita.com/bass/items/bb250c9b5c33521e1e09著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .