angular - 将选择标签数据绑定(bind)到Angular中的 react 形式

Question

我有一个来自后端的 JSON 格式的数据，性别作为前端的选择标签我无法预先选择 json 数据附带的选项。它也来自后端 enum格式，我需要它来相应地解析 1对于 Male和 2对于 Female这是我的后端数据的格式，

{
  "salesPersonId": 13,
  "name": "testName",
  "gender": 1,
  "phone1": "34986215",
  "phone2": "string",
  "email": "testingEmail@example.com",
  "team": "Bravo",
  "teamLeader": "Delta",
  "countyId": 1,
  "county": null,
  "subCountyId": 1,
  "subCounty": null,
  "address": "House 108",
  "additionalInfo": "He Drinks tea",
  "input1": "string",
  "input2": "string"
}

这就是我试图让它与我收到的数据绑定(bind)的内容，

 <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
    <mat-label>Gender</mat-label>
    <mat-select formControlName="gender">
        <mat-option value="1">1</mat-option>
        <mat-option value="2">2</mat-option>

    </mat-select>
</mat-form-field>

它既不会产生任何错误，也不会预先选择来自后端的性别标签。
注意:我使用的是 react 形式
提前致谢。

Answer 1

您可以使用 setValue Angular Forms 中的方法如下。

我假设您使用的是 FormGroup .在 HTML value应该用作属性绑定(bind)，如下所示。

<form [formGroup]="myGroup">
  <mat-form-field>
  <mat-label>Gender</mat-label>
  <mat-select formControlName="gender">
    <mat-option [value]="1">Male</mat-option>
    <mat-option [value]="2">Female</mat-option>
  </mat-select>
</mat-form-field>
</form>

如下更改您的 TS。

  user = { "name": "testName", "gender": 1 };

  ngOnInit() {
    this.myGroup.controls['gender'].setValue(this.user.gender);
  }

StackBlitz Demo.