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

Posted 2023-03-13

【中文标题】如何在离子 4 中的选择标签上插入图像？

【英文标题】：How can I insert Image on select tag in ionic 4?

【发布时间】：2020-01-29 09:18:21

【问题描述】：

这是我的代码：

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);
    

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

我已经尝试了所有可能的解决方案。但运气不好。

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

我得到的结果如下图：

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

【问题讨论】：

你可以使用 CSS 作为标志。

如果您有上述相同的情况，请提供一些 css。

请参考这些链接Here和Here

@ryanc 它不适合我。实际上我正在使用 ionic 4.

发布您尝试过但当前不起作用的最新代码。

【参考方案1】：

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

我刚刚搜索了一下，发现ngx-country-picker。

你可以像这样使用它：

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

您可以在this related repo 中查看可用字段的完整列表，它会将其列为灵感。