Hi
I would like to host dynamic control in ion-list
<ion-content>
<ion-list>
<ion-item *ngFor="#item of items" >
<myhost [data]="item"></myhost>
</ion-item>
</ion-list>
</ion-content>
<myhost [data]="item"></myhost> is component can load the data using dynamic loader
https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html#!#dynamic-loading
I can load <myhost> on a separate page successfully but when I add it under ion-list , items do not appear and looks like its hidden… any suggestions what is required to load the component in ion-list item ?
Your syntax for *ngFor should be *ngFor="let item of items"
. Does your solution build without errors?
sorry , its a typo in my post - yes I have *ngFor=“let item of items” but the list do not show the contents or resize to the content , is there any setting I missed ?
Try with a lower level declaration aka in your .html:
<ion-list>
<ion-item *ngFor="item of items" >
<myhost [data]="item"></myhost>
</ion-item>
</ion-list>
And in your .ts file, which is the issue most probably, log all errors with an alertController on popup:
this.items = this.http(map).res=> (your data).then.()
else{ // your alert message
}
Recently done that with the camera plugin to help me debug:
this.camera.getPicture(options).then((imageData) => {
this.base64Image = "data:image/jpeg;base64," + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
this.alertMessage('base64Image', this.base64Image);
// this.isbase64PicReady = true;
})
.catch(err=>{
console.log(err);
this.alertMessage('err', err);
})
}
Hope that helps
As described in the docs, things inside <ion-item>
must have an attribute of item-left
, item-content
, or item-right
.