Question

我使用Ionic 2并尝试显示键值数组的内容。我用了一个物体。

要显示我的收藏，我在html中使用了一个管道。有我的HTML：

3edc4rfv5tgb is Alphanumeric
cde3vfr4bgt5 is Alphanumeric

我的管道代码：

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

问题：我设置了我的阵列＆＃39;使用异步方法，但我的管道只加载一次。所以我的阵列＆＃39;不是空的，但是我的＆＃39; toto＆＃39;没有显示。

我的异步方法是在提供程序中设置的。它设置了我的阵列＆＃39;在查询Web服务之后。我的页面构造函数调用提供程序的函数来设置＆＃39;数组＆＃39;，并在视图中显示变量。

有我的提供者代码（p-data.ts）：

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;
  }
}

我的页面.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 => {});
  }

如何强制管道刷新？

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();

根据其尺寸可能也很昂贵。

离子2：* ng对象

1 个答案: