在下拉菜单中显示图像,但是当我选择该选项时,只有文本出现
<mat-select placeholder="Scanner region" [(ngModel)]="job.regions" name="job.regions"
[ngModelOptions]="{standalone: true}">
<mat-option *ngFor="let option of list" [value]="option.name">
<span *ngIf="option.account.accountType === 'AZURE'">
<img class="img-responsive " src="assets/images/azure-small.png" />
</span>
<span *ngIf="option.account.accountType === 'AWS'">
<img class="img-responsive" src="assets/images/aws-small.png" />
</span>
{{option.name}}
</mat-option>
</mat-select>
答案 0 :(得分:0)
这是因为您的图像链接是硬编码的。您可以使用Renderer2
之类的服务从DOM读取值,但是更好的方法是:
将图像链接存储为模型的一部分,即列表中的选项。
并更改
<mat-option *ngFor="let option of list" [value]="option.name">
到
<mat-option *ngFor="let option of list" [value]="option">
,以便当所选项目是包含名称和图像的对象时,通过数据绑定将其链接。