Question

我正在尝试使用* 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>

ts

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

我需要使用typesript / angular来解决此问题，而无需使用任何jquery插件

Answer 1

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

How to add images in select list?

评论中提到的最佳解决方案可能是使用角形材料：

How to implement angular 7 drop-down with images?

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

1 个答案: