angular select下拉框获取值

页面结构 上面一个下拉框显示ID，下面一个input框显示名称，选择ID时名称自动回显。提交时，需要同时获取id和name

html代码：

<mat-form-field>
  <mat-select placeholder="系统标识"  (ngModelChange)="onChnage(item)" #item [(ngModel)]="data.dataForm.systemName"   [disabled]="(data.title==='详情')">
    <mat-option  *ngFor="let item of parameterSystem" [value]="item.systemName" >
      {{item.systemId}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <input matInput [(ngModel)]="data.dataForm.systemName"  placeholder="系统名称"  required disabled>
</mat-form-field>

后台ts：

方法一：event.selected.viewValue就是下拉框选中的ID

onChnage( event: any ) {

if( event.value ){

console.log(event.selected.viewValue);
} }

方法二：通过调用filter（）方法  实际上也就是遍历，不推荐使用

onChnage( event: any ) {

if( event.value ){

this.selectedStatus = this.parameterSystem.filter( x => x.systemName === event.value );
this.systemId = this.selectedStatus[0].systemId;
onsole.log(this.systemId);
  }
}

方法一二均可以拿到id ，推荐使用方法一。