html - 以 json 为默认值的反应式表单控件

Question

嗨，我正面临反应式表单控件使用的问题。对于 mat-select 我有一个带有名称和 ID 的默认 JSON 数组。其中我只在下拉列表中显示名称。我想使用类似的 JSON 将名称设置为默认名称，但我无法做到这一点。请建议：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
    form: FormGroup
    data: any
    constructor(
        private formBuilder: FormBuilder
    ) {}

    ngOnInit() {
        this.stateList = [{
            name: 'def',
            id: '1'
        }, {
            name: 'ghi',
            id: '2'
        }];
        this.form = this.formBuilder.group({
            state: {
                name: 'abc',
                id: '1'
            }
        })
    }
}

<form [formGroup]="form">
  <mat-form-field>
    <mat-label>Color</mat-label>
   <mat-select [(value)]="state.name" formControlName="state">
     <mat-option *ngFor="let state of stateList" [value]="state">
     {{ state.name }}</mat-option>
      </mat-select>
  </mat-form-field>
</form>

标签： htmlangulartypescriptangular-material