離子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與對象

回答

相關問題