无法从 Angular 的下拉列表中填充和发布值

Question

当我加载页面时，我的 Category 下拉列表会自动填充数据库中的数据，然后我想从该下拉列表中选择值，然后单击按钮将数据发布到给定的 url。在页面加载时，下拉列表正确填写，没有任何错误，但是当我在下拉列表中选择任何值时，我收到此错误：

ERROR Error: Error trying to diff 'c'. Only arrays and iterables are allowed

如何解决此错误？

我的 add-form.component.ts

    import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, NgForm } from '@angular/forms';

interface LoginFormModel{
  productName?: string;
  retailPrice?: string;
  wholesalePrice?: string;
  category?: Category; 
  type?: string;
  productionStart?: string;
  productionEnd?: string;
}

interface Category{
  id?: number;
  name?: string;
}


@Component({
  selector: 'app-add-form',
  templateUrl: './add-form.component.html',
  styleUrls: ['./add-form.component.scss']
})

export class AddFormComponent implements OnInit {
  model: LoginFormModel= {};
  category: Category = {};
  form?: FormGroup;

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.httpClient.get('http://localhost:8090/api/category/')
      .subscribe(data => {
        this.model.category = data;
        console.log(this.model.category);
      }, err => {
        console.log('Error: ', err);
      })
  }

  eventSubmit(form: NgForm){
    if(form.invalid){
      return;
    }else{
      this.onSubmit();
    }
  }

  onSubmit() {
    console.log(this.model);
    this.httpClient.post('http://localhost:8090/api/product/',this.model)
      .subscribe(data => {
        console.log(data);
      })
  }
}

下拉菜单：

 <div class="form-group">
   <label class="col-md-3 control-label" for="category">Category:</label>
    <div class="col-md-9">
      <select class="form-control" required id="sel2" name="category" class="form-control" #formInput="ngModel"
                                [(ngModel)]="model.category">
        <option *ngFor="let c of model.category" value="c">{{c.name}}</option>
      </select>
       <div class="invalid-feedback">
         Category is required!
    </div>
  </div>
</div>

Answer 1

我认为这行有错误，

<option *ngFor="let c of model.category" value="c">{{c.name}}</option>

我认为value="c" 应该类似于[value]="c.value" 或value="{{c.value}}"

如果不改成这个， [value]="c.name"