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: ['']
  }
  }
  }

我可以具有“确定”值的列表，但是无法选择所选的项目。

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

我想念什么？

Answer 1

应为ngFor中的*ngFor="let grade of GRADES"

where ((@isLessThan = 0 and amount > 20) or (@isLessThan = 1 and amount < 20))

Demo

显示选择组合与带有Angular 6的模型驱动模板

1 个答案: