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

Question

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

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

Answer 1

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

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

并改变

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

至

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

因此，当选定的项目是同时包含名称和图像链接的对象时，通过数据绑定。

Answer 2

<mat-form-field class="full-width"> 
   <span matPrefix  [hidden]="project.issueTracker.accountType !== 'AZURE'">
   <img class="img-responsive " src="assets/images/azure-small.png" />
   </span>  
   <span matPrefix  [hidden]="project.issueTracker.accenter code hereountType !== 'AWS'">
   <img class="img-responsive " src="assets/images/aws-small.png" />
   </span>  
   <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>
</mat-form-field>