I am utilizing Ionic 2 and attempting to display the content of a key-value array using an object.
In order to display my collection, I am using a pipe in my HTML. Below is my HTML code:
<ion-list>
<ion-item *ngFor="let event of this.pdata.array | mapToIterable">Toto</ion-item>
</ion-list>
This is the code for my pipe :
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;
}
}
Issue : I am setting my 'array' with an async method, but my pipe is only loading once. Therefore, even though my 'array' is not empty, 'Toto' is not being displayed.
The async method is set in a provider. It sets the 'array' after querying a web service. The constructor of my page calls the provider's function to set the 'array' and display the variable in the view.
This is the code for my provider (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 => {});
}
Code for my page .ts file :
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();
}
}
How can I force my pipe to refresh ?