如何使用图像实现 Angular 7 下拉菜单？

Posted 2023-03-05

【中文标题】如何使用图像实现 Angular 7 下拉菜单？

【英文标题】：How to implement angular 7 drop-down with images?

【发布时间】：2019-11-21 23:47:09

【问题描述】：

我正在创建 Angular 7 应用程序，并使用 mat-select 进行下拉。现在我想在mat-select的每个项目中添加图片

见下图：

【问题讨论】：

使用 prime-ng 代替 mat-select 参见：primefaces.org/primeng/#/dropdown

【参考方案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

【讨论】：

Akber sir 解决方案中的另一个问题，在下拉列表中选择项目后，选择后如何显示图像。

你必须在那里放一个图片标签，比如：<img src='selectedFoof.img'>