如何使用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>