Question

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

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    refreshControl.updateProgress(with: scrollView.contentOffset.y)
}

如何解决此错误？

我的add-form.component.ts

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

下拉菜单：

    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);
      })
  }
}

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"

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

1 个答案: