イオン2：* ngForオブジェクトと

Question

私はイオン2を使用して、私はキー値の配列の内容を表示しようとします。私はオブジェクトを使用します。

私のコレクションを表示するために、私は自分のhtmlにパイプを使います。 私のhtmlがあります：

<ion-list> 
    <ion-item *ngFor="let event of this.pdata.array | mapToIterable">Toto</ion-item> 
    </ion-list> 

マイパイプコード：

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

type Args = 'keyval'|'key'|'value'; 

@Pipe({ 
    name: 'mapToIterable', 
    pure: true 
}) 
@Injectable() 
export class MapToIterablePipe implements PipeTransform{ 
    transform(obj: {}, arg: Args = 'keyval') { 
    return arg === 'keyval' ? Object.keys(obj).map(key => ({key: key, value: obj[key]})) : 
     arg === 'key' ? Object.keys(obj) : 
      arg === 'value' ? Object.keys(obj).map(key => obj[key]) : null; 
    } 
} 

問題：私は非同期メソッドで、私の「配列」を設定し、私のパイプは一度だけ負荷です。だから私の '配列'は空ではないが、私の 'toto'は表示されない。

プロバイダに非同期メソッドが設定されています。それは、Webサービスへのクエリの後に私の '配列'を設定します。私のページコンストラクタは、プロバイダの関数を呼び出して 'array'を設定し、その変数をビューに表示します。

私のプロバイダコード（P-data.ts）があります：

getDatas() : void { 
    let url: string = [MY_URL] 
    this.http.get(url).map(res => res.json()).subscribe(res => { 
     for (let i: number = 0 ; i < res.events.length ; i++) { 
     let object: any = res.events[i].data; 

     let data_guid : string = 'fr_medicalEvent_' + object.id; 

     this.array[data_guid] = new CData(data_guid, object.name, object.old); 
     } 
    }, error => {}); 
    } 

マイページ.TSファイル：

import { Component } from '@angular/core'; 

import {NavController, Platform} from 'ionic-angular'; 
import {PData} from "../../providers/p-data"; 
import {DetailsMedicalEventPage} from "../details-medical-event/details-medical-event"; 
import {PTranslate} from "../../providers/p-translate"; 

@Component({ 
    selector: 'page-to-come', 
    templateUrl: 'to-come.html' 
}) 
export class ToComePage { 


    constructor(public navCtrl: NavController, public pdata : PData, public translate : PTranslate) { 
    this.pdata.getDatas(); 
    } 

} 

どのように私はリフレッシュするために私のパイプを強制することができますか？

Answer 1

パイプが Promiseまたは Observableを返す場合、あなたは

<ion-item *ngFor="let event of this.pdata.array | mapToIterable | async"> 

更新

よう|asyncパイプを使用する必要がある問題は、既存を変更することです配列（this.array[data_guid] = ...)。Angularはこれを変更と認識せず、viを更新しませんew。どちらのパフォーマンスを損なう、またはあなたがそれもそのサイズに応じて費用がかかる

this.array[data_guid] = new CData(data_guid, object.name, object.old); 
this.array = this.array.slice(); 

を更新した後、あなたは別のもので配列を置き換えるあなたのパイプ不純

@Pipe({name: "...", pure: false}) 

します。