在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 Image]() {{ option.name }}
      {{ option.name }}
     
   
 
  Selected option: {{ selectedOption }}
在上面的示例中,options数组包含了每个选项的名称和对应的图像路径。在mat-option中,使用[src]绑定图像路径,alt指定图像的替代文本,width和height指定图像的尺寸。
当选择一个选项时,onOptionSelected方法会被调用,并将选项的名称赋值给selectedOption变量。在模板中,使用*ngIf指令来显示选中的选项。
这样,当下拉列表中的选项改变时,图像和选项的名称都会正确地渲染出来。