Как я могу вставить изображение на выбранный тег в ионной 4? - PullRequest
Новая
       59

Как я могу вставить изображение на выбранный тег в ионной 4?

0 голосов
/ 30 сентября 2019

Вот мой код:

home.page.html 

    <ion-item>
     <ion-select (click)="loadFlags()" value="select-country" style="max-width: 100%;">
      <ion-select-option value="select-country">select your country </ion-select-option>
      <ion-select-option *ngFor="let country of countries" value="{{country.flag}}">
        {{country.name}}
      </ion-select-option>
     </ion-select>
     <ion-input type="tel" placeholder="Mobile Number" [(ngModel)]="number" slot="end"></ion-input>
    </ion-item>

home.page.ts 

    public countries: any = [];

     async getCountries() {
      await this.http.getCounteries()
        .subscribe(countries => {
          // console.log("countries", countries);
          this.countries = countries;
        }, err => {
          // console.log("err", err);
          this.countries = err;
        });
    }

    loadFlags() {
      setTimeout(()=>{ 
        let countries = this.countries;
        // console.log("get countries", countries);
       let radios=document.getElementsByClassName('alert-radio-label');
       for (let index = 1; index < radios.length; index++) {
          let element = radios[index];
          // console.log("element", element);

          // console.log("index", countries[index-1].flag);
          element.innerHTML=element.innerHTML.concat('<img class="country-image" style="width: 30px;height:16px;" src="'+countries[index-1].flag+'" />');
        }
    }, 50);
    }

И я хочу, чтобы все выглядело так:

enter image description here

Я испробовал все возможные решения. но не удача.

Как я могу выглядеть так же ?. Пожалуйста, направьте любой код как можно скорее. Было бы очень признательно.

Я получаю результат, как на следующем изображении:

enter image description here

Мне нужно отображать изображение флага на выбор вместоназвание страны при выборе любой страны из опций.

1 Ответ

0 голосов
/ 01 октября 2019

Вместо того, чтобы изобретать это самостоятельно, вы можете попробовать решение, разработанное сообществом.

Я только что выполнил поиск и нашел ngx-country-picker .

Вы можете использовать что-то вроде этого: 

<country-picker [flag]="true" [setValue]="'callingCode'" [setName]="'name.common'"></country-picker>

Вы можете увидеть полный список доступных полей в этом связанном репо , который он перечисляет как вдохновение.

...