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

【问题标题】：Display select combo with Model driven template with Angular 6使用带有 Angular 6 的模型驱动模板显示选择组合
【发布时间】：2018-07-11 20:19:03
【问题描述】：

我有一个使用 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: ['']
  }
  }
  }

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

很奇怪，因为我在每个item上都打印了condition结果，应该选中的时候是true，但是却没有选中item...

我错过了什么？

【问题讨论】：

标签： angular angular6 angular-reactive-forms

【解决方案1】：

在ngFor中应该是GRADES

*ngFor="let grade of GRADES"

Demo

【讨论】：

对不起，我的错误，在组件中，我有成绩 = GRADES;并且 GRADES 被定义为 const 并在他自己的文件中导出，我会更新问题
是的，我可以不使用响应式表单，但是使用响应式表单，似乎 ngValue 不再起作用了
添加generalDataForm = new FormControl();到组件
我更新了问题，我已经将它定义为：this.generalDataForm = this.formBuilder.group({all validation...])
我正在做一个演示：stackblitz.com/edit/angular-u11pdk 但我不能让它工作:(