尝试将属性用于 [(value)] 时出错

Question

我想选择存储在我的数据库中的选项字段。

<mat-form-field>
  <mat-select [(value)]="this.entities.gender" #gender formControlName="gender">
    <mat-option value="f">Female</mat-option>
    <mat-option value="m">Male</mat-option>
  </mat-select>
</mat-form-field>

private entities: IprofileData;

async ngOnInit() {
  this.entities = await this.profileService.getEntities().pipe(take(1)).toPromise();
  console.log(this.entities); // <-- This returns all the data that I need
}

但我得到了错误：

ERROR TypeError: Cannot read property 'gender' of undefined

为什么我无法使用this.entities？

---

更新

我也尝试过使用 FormGroup 设置默认值

  private profileFormGroup = this.fb.group({
    gender: this.entities.gender
  });

但我得到了错误

错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“性别”

Answer 1

不要将value 与formControlName 一起使用，请使用formControlName

模板

<mat-form-field>
  <mat-select #gender formControlName="gender">
    <mat-option value="f">Female</mat-option>
    <mat-option value="m">Male</mat-option>
  </mat-select>
</mat-form-field>

组件.ts

private entities: IprofileData;

async ngOnInit() {
  this.entities = await 
  this.profileService.getEntities().pipe(take(1)).toPromise();
  console.log(this.entities); // <-- This returns all the data that I need
  // you need to put the value into formGroup
  this.profileFormGroup.get('gender').patchValue(this.entities.gender);
}

Answer 2

首先，你不能在模板中使用this

第二，你不能在模板中使用private属性，它们必须是公共的。

第三，我建议你坚持使用 observable 而不是 promise，这里有一个更好的解决方案

<mat-form-field>
  <mat-select [(value)]="entities$ | async as entities" #gender
      formControlName="entities?.gender">
    <mat-option value="f">Female</mat-option>
    <mat-option value="m">Male</mat-option>
  </mat-select>
</mat-form-field>

entities$: Observable<IprofileData>;

ngOnInit() {
  this.entities$ = this.profileService.getEntities().pipe(take(1));
}