Tengo una lista en la que estoy usando un número aleatorio para elegir un avatar y arroja el siguiente error:
HelloIonicPage.html:33 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.Vista:
<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" }Supongo que puedes probar el truco con background-image y [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>También necesita CSS adicional, por lo que es personalizado, cambie según lo necesite
.avatar-photo { width: 160px; height: 160px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; }¡Espero que ayude!