javascript - 如何在离子 4 中的选择标签上插入图像？

Question

这是我的代码：

主页.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>

主页.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);
    }

我希望看起来像下面这样：

我已经尝试了所有可能的解决方案。但没有任何运气。

我怎样才能获得相同的外观？请尽快指导任何代码。这将不胜感激。

我得到的结果如下图：

从选项中选择任何国家时，我需要在选择时显示标志图像而不是国家名称。

标签： javascripthtmltypescriptionic4scss-lint

Answer 1

与其自己重新发明，不如尝试社区开发的解决方案。

我刚刚搜索并找到了ngx-country-picker。

你可以像这样使用它：

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

您可以在此相关 repo中查看可用字段的完整列表，它作为灵感列出。