javascript - 在 ngFor 循环中使用 Object.keys 时如何设置默认值？

Question

<mat-select required formControlName="country" [(ngModel)]="defaultCountry" placeholder="Country">
   <mat-option *ngFor="let key of Object.keys(countryList)" [value]="[key]">{{[key]}}</mat-option>
</mat-select>

我有上面的代码。这些国家/地区在 Material 选择中显示良好，但默认选项“DefaultCountry”不起作用。我相信这是由于我使用了 Object.keys，因为以下代码确实适用于默认选项。

<mat-select required formControlName="country" [(ngModel)]="defaultCountry" placeholder="Country">
   <mat-option *ngFor="let country of deleteLaterCountryList" [value]="country.countryCode">{{country.countryCode}}</mat-option>
</mat-select>

我想知道如何使用默认选项使我的第一段代码工作。我不想使用第二段代码。

Answer 1

我确实需要更多详细信息，但我可以看到您正在使用响应式(Reactive)表单。在这种情况下，就不需要 ngModel。让我们假设您正在使用名为“yourForm”的 formGroup。

<form [formGroup]="yourForm">
  .
  .
  <mat-select required formControlName="country" placeholder="Country">
    <mat-option *ngFor="let key of Object.keys(countryList)" [value]="[key]">{{[key]}}</mat-option>
  </mat-select>
  .
  .
<form>

在 component.ts 上，您可以使用 patchValue 为 country formControl 赋值，该值将显示为默认选项。

yourForm: FormGroup = this.formBuilder.group({
  country: [null, Validators.required],
  .
  .
  // other form controls
});

ngOnInit() {
  this.yourForm.patchValue({
    country: 'SG'
  });
}