如何使用angular 7从下拉菜单中选择图像后获取图像和文本

时间:2019-03-07 09:03:59

标签: angular angular-material angular7

在下拉菜单中显示图像,但是当我选择该选项时,只有文本出现

<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>

1 个答案:

答案 0 :(得分:0)

这是因为您的图像链接是硬编码的。您可以使用Renderer2之类的服务从DOM读取值,但是更好的方法是:

将图像链接存储为模型的一部分,即列表中的选项。

并更改

<mat-option *ngFor="let option of list" [value]="option.name">

<mat-option *ngFor="let option of list" [value]="option">

,以便当所选项目是包含名称和图像的对象时,通过数据绑定将其链接。