Не удается заполнить и опубликовать значение из выпадающего списка в Angular - PullRequest
Новая
       7

Не удается заполнить и опубликовать значение из выпадающего списка в Angular

0 голосов
/ 03 ноября 2018

Когда я загружаю страницу, мой раскрывающийся список Категория автоматически заполняется данными из базы данных, затем я хочу выбрать значение из этого раскрывающегося списка и при нажатии кнопки опубликовать данные для данного 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>

1 Ответ

0 голосов
/ 03 ноября 2018

Я думаю, что в этой строке есть ошибка,

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

Я думаю, что value="c" должно быть что-то вроде [value]="c.value" или value="{{c.value}}"

Если не изменить это на это, [value]="c.name"

...