离子2：* ngFor与对象

我使用离子2和I尝试做一个键 - 值阵列的显示内容。我使用一个对象。离子2：* ngFor与对象

为了显示我的收藏，我在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; 
    } 
}

问题：设置我的“阵列”与异步方法，但我的管是负载一次。所以我的'数组'不是空的，但我的'托托'不显示。

我的异步方法是在供应商设置。它在查询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(); 
    } 

}

我怎么能强迫我管刷新？

来源

2017-03-28 V. Pivet

这将是有益的，如果你的代码会告诉你如何使用“异步方法”。 –

是的，请添加代码。描述非常模糊。 –

我无法在'getDatas（）'和管道之间找到连接。 –

~~如果管返回 Promise或 Observable，那么你需要使用 |async管像~~

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

更新

的问题是，修改现有阵列（this.array[data_guid] = ...)。角不会识别为改变和将不会更新六EW。要么你让你管不纯

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

此举不仅损害性能，或更换了一个不同的数组，你更新后

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

这也可能是昂贵的取决于其大小。

来源

2017-03-28 08:47:14

我的管道不返回承诺。我在一家提供商中打电话给我。 –

如果您在您的管道的异步调用，你需要返回一个'Promise'或'Observable'。你很可能会解决这个问题。 –

我尝试在我的对象中使用slice（）时出现错误。：“属性'切片'不存在于类型'{[guid：string]：CData;}'。”中。我试图让我的管道不纯，但它不起作用：我的页面被阻塞（我认为无限循环），我的'toto'不显示。 –

离子2：* ngFor与对象

回答

相关问题