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

【问题标题】：how to get data from mat-option loop?如何从 mat-option 循环中获取数据？
【发布时间】：2019-06-14 23:08:56
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： angular

【解决方案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>

【讨论】：