在 *ngFor 的 <select> 下拉列表中添加带有 <option> 的图像答案

【问题标题】：Add images with <option> in <select> dropdown list in *ngFor在 *ngFor 的 <select> 下拉列表中添加带有 <option> 的图像
【发布时间】：2019-12-24 17:17:47
【问题描述】：

我尝试使用 *ngFor 在我的下拉列表中添加图像，但我无法显示图像图标，但可以显示文本，知道如何解决这个问题吗？这是我尝试过的：

html

  <form [formGroup]="countryForm">
          <select formControlName="countryControl" (change)="optionSelected($event.value)">
          <option [value]="country" *ngFor="let country of countries"><img class="icon-custom" [src]="country.icon" [alt]="country.viewValue">{{country.viewValue}}</option></select>
  </form>

      countries = [
        { value: 'xxx-0', viewValue: 'xxx (+xx)', code: 'xx', icon: '../../assets/svg/icon-cc-add-blue.svg' },
        { value: 'yyy-0', viewValue: 'yyy (+yy)', code: 'yy', icon: '../../assets/svg/icon-cc-add-blue.svg' }
];

  optionSelected(event) {
    this.selectedIcon = event.value.icon;
  }

我需要在不使用任何 jquery 插件的情况下使用 typesript/angular 来解决这个问题

【问题讨论】：

How to add small thumbnails to `<option>` elements in a `<select>` list?的可能重复
我使用 *ngFor，它确实不同

标签： angular drop-down-menu html-select angular-reactive-forms ngfor

【解决方案1】：

正如@hazifi 在下面的评论中提到的那样。选项标签仅支持文本 - Link here。您可以使用背景图片，但它会限制您定位其他元素。

How to add images in select list?

cmets 中也提到的最佳解决方案可能是使用有角材料：

How to implement angular 7 drop-down with images?

【讨论】：

您在定义为资产的 angular.json 中有什么？ "assets": [?]
"assets": [ "src/favicon.ico", "src/assets" ] @nephi
@hafizi 我认为您的 svg 文件可能会丢失一些信息。我已经尝试过一个示例项目并且遇到了同样的问题。你能分享你的一个svg的内容吗？
我不认为它是 svg .. 这是因为
@hazifi 我已更新我的答案以反映您的发现。