I have a list where I am using a random number to choose an avatar and its throwing the following error:
HelloIonicPage.html:33 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
View:
<ion-list>
<ion-item *ngFor="let client of clients; let i = index;>
<ion-avatar item-left>
<img [src]="getRandomInt(0, 9)">
</ion-avatar>
</ion-item>
</ion-list>
.ts
getRandomInt(min, max) {
let num = Math.floor(Math.random() * (max - min + 1)) + min;
return "https://randomuser.me/api/portraits/lego/" + num + ".jpg"
}
I guess you can try trick with background-image and [ngStyle]
HTML
<ion-list>
<ion-item *ngFor="let client of clients; let i = index; let r = getRa" >
<ion-avatar item-left>
<div class="avatar-photo" [ngStyle]="{ 'background-image': 'url(' + getRandomInt(0, 9) + ')' }"></div>
</ion-avatar>
</ion-item>
</ion-list>
You also need additional CSS, so it custom, change as you need
.avatar-photo {
width: 160px;
height: 160px;
border-radius: 50%;
background-size: contain;
background-repeat: no-repeat;
}
I hope it help!