Как получить изображение и текст после выбора варианта из выпадающего меню 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

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

Answer 2

Это потому, что ссылки на ваши изображения жестко запрограммированы.Вы можете использовать такой сервис, как Renderer2, чтобы прочитать значение из DOM, но лучший способ это сделать:

Хранить ссылки на изображения как часть модели, то есть параметр в списке.

и изменять

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

до

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

, так что когда выбранный элемент является объектом, который содержит как имя, так и ссылку на изображение черезпривязки данных.