在Angular 6中,可以通过以下步骤在下拉列表中渲染图像:
npm install @angular/material @angular/cdk --save
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatSelectChange } from '@angular/material';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
selectedOption: string;
options: any[] = [
{ name: 'Option 1', image: 'path/to/image1.png' },
{ name: 'Option 2', image: 'path/to/image2.png' },
{ name: 'Option 3', image: 'path/to/image3.png' }
];
dropdownControl = new FormControl();
onOptionSelected(event: MatSelectChange) {
this.selectedOption = event.value;
}
}
mat-select
和mat-option
来创建下拉列表,并在mat-option
中使用ngFor
指令来循环渲染选项:
{{ option.name }}
Selected option: {{ selectedOption }}
在上面的示例中,options
数组包含了每个选项的名称和对应的图像路径。在mat-option
中,使用[src]
绑定图像路径,alt
指定图像的替代文本,width
和height
指定图像的尺寸。
当选择一个选项时,onOptionSelected
方法会被调用,并将选项的名称赋值给selectedOption
变量。在模板中,使用*ngIf
指令来显示选中的选项。
这样,当下拉列表中的选项改变时,图像和选项的名称都会正确地渲染出来。