angular - 使用带有 Angular 6 的模型驱动模板显示选择组合

Question

我有一个使用 ReactiveForms 的组件，它正在使用：

    <form [formGroup]="generalDataForm" (ngSubmit)="onSubmit()">
      <select name="grade_id" id="grade_id" class="form-control" formControlName="grade_id">
          <option *ngFor="let grade of grades" [ngValue]="grade.id [selected]="grade.id === user.grade_id">
{{ grade.text | translate }} {{ user.grade_id }} {{ user.grade_id === grade.id }}
           </option>
     </select>
      <div align="right">
         <button type="submit" class="btn btn-success">Save</button>
      </div>
    </form>

在 mock_grades.ts 中，我有：

export const GRADES: Grade[] = [
  {
    'id': 0,
    'text': 'add_cat.no_grade_restriction',
    'order': 0,
  },
  {
    'id': 2,
    'text': '7 Kyu',
    'order': 1,
  },       etc...

在我的组件中，我有：

export class ProfileComponent implements OnInit {
  generalDataForm: FormGroup;
  public type = 'component';
  grades = GRADES;
  ...
 ngOnInit(): void {
   this.generalDataForm = this.formBuilder.group({
    name: [this.user.name, Validators.required],
    firstname: [''],
    lastname: [''],
    grade_id: [''],
    country_id: ['']
  }
  }
  }

我可以让值列表确定，但我无法选择所选项目。

这很奇怪，因为我在每个项目上都打印了条件结果，并且应该选择它时是真的，但它没有选择项目......

我错过了什么？

标签： angularangular6angular-reactive-forms

Answer 1

应该GRADES在ngFor

*ngFor="let grade of GRADES"

演示