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>

我有上面的代码。国家/地区在“材料选择”中显示良好，但是默认选项“ 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

我确实在这里需要更多详细信息，但是我可以看到您正在使用反应式表单。在这种情况下，不需要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'
  });
}

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

1 个答案: