8

サーバーから取得したデータを処理するカスタム パイプを Angular 2 RC5 に実装しました。私が抱えている問題は、パイプがngOnInitサーバーへの呼び出しを行っている場所の前に実行されることです。

テストとして、すでに入力されているリストをパイプに渡しましたが、すべてが期待どおりに機能します。私が抱えている唯一の問題は、ページがレンダリングされるときにパイプが実行されることです。したがって、その場合のリストは空です。

パイプが実行されたときにサーバーからデータが取得されるように、ページのレンダリングを「遅らせる」方法はありますか?

これは私のコードのサンプルです:

成分

ngOnInit() {
    Observable.forkJoin([
        this.testService.get(),
        this.multilingualService.get(localStorage.getItem('currentPage'))
    ]).subscribe(servicesResult => {
        this.mainList = servicesResult[0];
        this.pageMultilinguals = servicesResult[1];
    },
    error => this.handleError(error));
}

パイプ

@Pipe({name: 'multiLang'})
export class MultilingualPipe implements PipeTransform {
    transform(value: string, pageMultilinguals: Multilingual[], context: number): string {

        for (let i = 0; i < pageMultilinguals.length; i++) {
            if (pageMultilinguals[i].reference === value && pageMultilinguals[i].contexTypeId === context) {
                return pageMultilinguals[i].value;
            }
        }
    }
}

テンプレート

<span>{{ 'Test' | multiLang: pageMultilinguals: 9 }}</span>
4

1 に答える 1

6

Angular が変更検出を実行すると、パイプが初めて実行されます。最初の変更検出の実行後、ngOnInit()が呼び出されます。サーバー呼び出しを行ってもすぐに応答が得られるわけではないため、パイプへの呼び出しを遅らせることngOnInit()はまったく役に立ちません。ngOnInit()HTTP 要求は非同期呼び出しであり、応答は最終的に返されますが、ngOnInit()完了までに時間がかかります。

あなたの場合、パイプをnull値に対して安全にするだけで十分だと思うので、渡された値がnull次の場合に例外が発生しません。

@Pipe({name: 'multiLang'})
export class MultilingualPipe implements PipeTransform {
    transform(value: string, pageMultilinguals: Multilingual[], context: number): string {
        if(!value || !pageMultilinguals || !context) {
          return null;
        }
        for (let i = 0; i < pageMultilinguals.length; i++) {
            if (pageMultilinguals[i].reference === value && pageMultilinguals[i].contexTypeId === context) {
                return pageMultilinguals[i].value;
            }
        }
    }
}
于 2016-09-06T15:52:52.913 に答える