离子 2 : *ng 对于一个对象

Question

我使用Ionic 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 服务后设置了我的"数组"。我的页面构造函数调用提供程序的函数来设置"数组"，并在视图中显示变量。

有我的提供程序代码(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，则需要使用|async管道，例如

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

更新

问题是您修改了现有数组 ( this.array[data_guid] = ...) .Angular 不会将此识别为更改，也不会更新视图。要么你让你的烟斗不纯

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

这会损害性能，或者在更新数组后将其替换为其他数组

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

根据其大小，也可能很昂贵。