Использовать привязку свойства [alt]="country.substring(0,2)"
.
Модифицированный код
<ion-list>
<ion-item *ngFor="let country of countryList">
<ion-avatar item-left>
<img src="assets/imgs/flags/{{country}}.png" [alt]="country.substring(0,2)">
</ion-avatar>
<p>{{country}}</p>
</ion-item>
</ion-list>
Вы можете привязать метод к error
извлечь подстроку и отобразить ее соответственно
Страница / Компонент
export class HomePage {
public error:string[]=[];
constructor(public navCtrl: NavController) {
}
setValue(country:string,index:number)
{
console.log(country);
this.error[index]=country.substring(0,2);
}
}
HTML
<ion-list>
<ion-item *ngFor="let country of countryList; let i=index">
<ion-avatar item-left>
<img src="assets/imgs/flags/{{country}}.png" (error)="setValue(country,i)" >
<ng-container >
<span *ngIf="error[i]?.length" class="circle">{{error[i]}}</span>
</ng-container>
</ion-avatar>
{{country}}
</ion-item>
</ion-list>