Hi,
I’m using IONIC 3.19.1.
<ion-content padding>
<ion-list>
<button ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</button>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
in the above code snippet the <h2>{{shift.operatorCode}}</h2> <p>{{shift.date}}</p>
are note rendering. Pls see the attachment.
U need to wrap items in ion-item
See the example in the ionic doc on ion-list
Hi Tommertom,
This code snippet is copied from the official doc and here they just used <h2> and <p>
tag.
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/avatar-cher.png">
</ion-avatar>
<h2>Cher</h2>
<p>Ugh. As if.</p>
</ion-item>
</ion-list>
Please see the link.
Thanks
Why do you have two button defintions of which one is nested in the other?
Remove the outer and make it ion-item (with the ngFor) and the look what happens?
yeah i have already tried it but the result is the same.
Not sure if you can put these tags in an ion-button. Ion-button as ion-item has its own very designated styling (with >)
Maybe use (click) handler on ion-item instead of using button?
Take the working example u showed from the doc
>
> <ion-list>
> <ion-item (click)="whatever()">
> <ion-avatar item-start>
> <img src="img/avatar-cher.png">
> </ion-avatar>
> <h2>Cher</h2>
> <p>Ugh. As if.</p>
> </ion-item>
> </ion-list>
Hi, Tommertom.
The issue was with the .
I have changed it to and its worked.
Thanks for the support