Если источник изображения не найден, показать первые две буквы элемента в списке - PullRequest
0 голосов
/ 07 июня 2018

Я новичок в angular и Ionic 3. У меня есть флаги стран в каталоге.Я пытаюсь перечислить название страны с ее флагом, как показано на изображении [1]: https://i.stack.imgur.com/PJBhf.jpg

Если изображение конкретного флага страны не найдено, первые два символа названия страныдолжен отображаться вместо изображения.

До сих пор я пробовал это, но не смог достичь требуемого результата.Может кто-нибудь помочь мне, как это сделать.Заранее спасибо.

<ion-list>
<ion-item *ngFor="let country of countryList> 
<ion-avatar item-left>       

<img src="assets/imgs/flags/{{country}}.png" *ngIf="imgSrc;else customImg" (error)= "imgSrc=false">

<ng-template #customImg>
 <span *ngIf="!imgSrc" class="circle">{{country.substring(0, 2)}}</span>
</ng-template>

</ion-avatar>
<p>{{country}}</p>
</ion-item>
</ion-list>

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Использовать привязку свойства [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>
0 голосов
/ 07 июня 2018

Вы можете использовать атрибут alt (на самом деле вы всегда должны это делать, например, для предоставления информации людям с нарушениями зрения).Так что здесь вам не нужны никакие условные операторы, просто заполните атрибут alt всех изображений той аббревиатурой, которую вы хотите показать, если изображение не найдено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...