在mat-Select中显示来自mat-选项的图像

Question

因此，我有一段html，其中包括一个mat表单字段，该字段有一个mat select和一个mat选项。这些mat选项是从服务器生成的，它们有一个图像，当选择一个选项时，我需要在mat select中显示该图像（每个选项都有自己的图像）

<mat-select>
    <ng-container
            *ngFor="let option of options">
            <mat-option>
                <!-- Image -->
                    <img
                        height="24px"
                        [src]="option[optionLabelImgKey]"/>
                !-- Label -->
                {{option[optionLabelKey] | translate}}
            </mat-option>
     </ng-container>
</mat-select>

每次选择新选项时，我都要在mat select中显示选项标签和图像。

我读过mat select触发器，但对我来说没有任何效果。

Answer 1

试着把这个：

<img height="24px" src="option[optionLabelImgKey]"/>

可能您的问题是img由于无法访问文件而无法显示（错误路由）。

顺便说一句，我在stackblitz创建了一个fork，其中有一个工作示例，即mat select中的图像列表，您可以查看：https://stackblitz.com/edit/angular-9txen8