Question

我正在使用mat-select，并且选项正在从数据库中获取。在该表中也有用于图像的列，当更改mat-option时，我想在mat-select之外更改图像。

那么我该如何在mat-option循环之外提取值

我在mat-option中添加了selectionChange，但它是以前的值，而不是当前的值。

她是我的密码

<mat-form-field appearance="outline" *ngIf="toggle[i]">
  <mat-label>Select Purpose</mat-label>
   <mat-select name="purposes" #purposeModel="ngModel" [(ngModel)]="purpose.id" [value]="purpose.id" (selectionChange)="onPurposeChange(purposeModel, purpose.id)">
    <mat-option>Select Purpose</mat-option>
    <mat-option *ngFor="let p of purposeList" [value]="p.id" >
    {{p.title}} {{p.id}}
    </mat-option>
  </mat-select>
</mat-form-field>

，我想显示我将在p.iconsUrl中获得的图像这是我要显示图像的代码。

<div class="imageIcons" *ngIf="purpose.iconsUrl" >
            <img [src]="'assets/images/Purpose/' + purpose.iconsUrl" [alt]="purpose.title" *ngIf="!purposeChange" />
            <img [src]="'assets/images/Purpose/' + iconURL[purpose.id]" [alt]="purpose.title" *ngIf="purposeChange" />
          </div>

Answer 1

将purpose对象而不是mat-select绑定到purpose.id。试试这个；

<mat-form-field appearance="outline" *ngIf="toggle[i]">
  <mat-label>Select Purpose</mat-label>
  <mat-select name="purposes" [(ngModel)]="purpose" [value]="purpose">
    <mat-option>Select Purpose</mat-option>
    <mat-option *ngFor="let p of purposeList" [value]="p"> {{ p.title }} {{ p.id }} </mat-option>
  </mat-select>
</mat-form-field>

如何从mat-option循环中获取数据？

1 个答案: