html - 如何使用图像实现 angular 7 下拉菜单？

Question

我正在创建 angular 7 应用程序，并使用 mat-select 进行下拉。现在我想在 mat-select 的每个元素中添加图像

见下图:

Answer 1

确保您在 mat-option 中提供的阵列中有图像。 ;然后，创建一个图像标签并为其提供图像源。

相关 HTML :

<h4>Basic mat-select with images</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      <img src='{{food.img}}'> {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

相关 TS :

import { Component } from '@angular/core';

export interface Food {
  value: string;
  viewValue: string;
  img: string;
}

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak', img: 'https://www.akberiqbal.com/favicon-32x32.png' },
    { value: 'pizza-1', viewValue: 'Pizza', img: 'https://www.akberiqbal.com/favicon-16x16.png' },
    { value: 'tacos-2', viewValue: 'Tacos', img: 'https://www.akberiqbal.com/favicon-96x96.png' }
  ];
}

完整 working stackblitz here