如何在图片中实现Angle 7下拉菜单? [英] How to implement angular 7 drop-down with images?
本文介绍了如何在图片中实现Angle 7下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建angular 7应用,并使用mat-select进行下拉.现在我想在mat-select
I'm creating angular 7 app, and using mat-select for drop-down. Now i want add image within each item of the mat-select
请参见下图:
推荐答案
确保您在mat-option
中提供的数组中有图像;然后,创建一个图像标签并为其提供图像源.
Ensure you have images in the array which you're providing in the mat-option
; then, create an image tag and provide the image source to it.
相关的 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' }
];
}
这篇关于如何在图片中实现Angle 7下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文