Angular - ошибка при выборе - NgFor поддерживает только привязку к итерируемым объектам, таким как массивы

Question

Angular - ошибка при выборе - NgFor поддерживает только привязку к итерируемым объектам, таким как массивы

1

У меня есть REST API, созданный с помощью NodeJS, который отправляет мне ответ JSON, и я использую эти данные ответа для заполнения опций элемента ввода select:

[{"id":1,"tasktype":"Programación","taskvalue":350,"date":"2018-08-02T03:00:00.000Z","status":1},{"id":2,"tasktype":"Diseño","taskvalue":320,"date":"2018-08-01T03:00:00.000Z","status":1}]

Я получаю информацию, используя HttpClient из Углового сервиса:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TaskType } from '../models/taskType.model';

@Injectable({
  providedIn: 'root'
})
export class taskTypeService {
  private serviceUrl = 'http://localhost:3000/tasktype';
  selectedT: any;
  constructor(private http: HttpClient) { }
  getTaskTypes(): Observable<TaskType> {
    return this.http.get<TaskType>(this.serviceUrl)
  }
  getTaskType(id): Observable<TaskType[]> {
    return this.http.get<TaskType[]>(this.serviceUrl+'/'+id)
  }
}

Затем у меня есть компонент, который обрабатывает запрос с помощью функции:

import { Component, OnInit } from '@angular/core';
import { taskTypeService } from '../services/tasktype.service';
import { TaskType } from '../models/taskType.model';


@Component({
  selector: 'app-tasktypes',
  templateUrl: './tasktypes.component.html',
  styleUrls: ['./tasktypes.component.css'],
  providers: [taskTypeService]
})
export class TaskTypeComponent implements OnInit {
  private customersid; 
  public getTask;
  constructor(
    private tasktypeService: taskTypeService,
  ) {
    //this.getCustomerId(id);
  }
  public getTaskTypes() {
    this.tasktypeService.getTaskTypes().subscribe(data => {
      this.getTask = data;
      console.log(this.getTask)
    })
  }
  public getTaskId(_task){
    this.tasktypeService.getTaskType(_task).subscribe(data => {
      this.getTask = data;
    })
  }
  ngOnInit() {}
}

У меня есть другой компонент для создания формы с помощью Form Builder:

    constructor(
    private fb: FormBuilder,
    private customerService: CustomerComponent,
    public tasktypeService: TaskTypeComponent,
  ) { }
  NewBudgetForm: FormGroup;
  ngOnInit() {
    this.NewBudgetForm = this.fb.group({
      title: ['', Validators.required],
      customer: [this.customerService.getCustomers() ,Validators.required],
      startdate: [''],
      enddate: [''],
      expirationdate: [''],
      servicetype: [''],
      budgettype: [''],
      budgetdetail: ['', Validators.maxLength(256)],
      conditions: ['', Validators.maxLength(256)],
      hours: this.fb.array([
        this.initHours(),
      ]),
      budgetsubtotal: [''],
      budgettax: ['21'],
      budgettotal: ['']
    })

  }
  initHours() {
    return this.fb.group({
      hourqty: ['1'],
      task: [''],
      tasktype: [this.tasktypeService.getTaskTypes(),Validators.required],
      taskvalue: ['350'],
      tasktotal: [''],
    })
  }

Наконец, в html-шаблоне я использую эти значения для заполнения опций выбора:

<select placeholder="Tipo de Tarea" dividerColor="accent" formControlName="tasktype" #tasktype>
              <option *ngFor="let task of tasktypeService.getTaskTypes" [value]="task.id">{{task.tasktype}}</option>
</select>

Когда я запускаю все, Chrome Console показывает мне следующую ошибку:

Ошибка ERROR: не удается найти функцию вспомогательного объекта с разными функциями() {var _this = this; this.tasktypeService.getTaskTypes().subscribe(function (data) { _this.getTask = data; console.log(_this.getTask); }); this.tasktypeService.getTaskTypes(). subscribe (function (data) {_this.getTask = data; console.log(_this.getTask);}); } 'типа' function '. NgFor поддерживает только привязку к Iterables, например массивы. в NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges(common.js: 3121) в checkAndUpdateDirectiveInline (core.js: 9038) в checkAndUpdateNodeInline (core.js: 10306) в файле checkAndUpdateNode (core.js: 10268) в debugCheckAndUpdateNode (core.js: 10901) в debugCheckDirectivesFn (core.js: 10861) в Object.eval [в качестве updateDirectives] (NewBudgetComponent.html: 60) в Object.debugUpdateDirectives [в качестве updateDirectives] (ядро.js: 10853) в checkAndUpdateView (core.js: 10250) при вызовеViewAction (core.js: 10491)

Первый заполненный select (this.customerService.getCustomers()) работает хорошо, но не второй.

Eugenio 04 авг. 2018, в 21:36

Источник

0

this.getTask - это объект, вы можете использовать ngFor только над массивом
Sajeetharan - MSFT 04 авг. 2018, в 18:43

Теги:

angular

javascript

node.js

ngfor

1 ответ

Ещё вопросы

this.getTask - это объект, вы можете использовать ngFor только над массивом

Temkit Sidali · Answer 1 · 2018-08-04T16-38-00.000Z

Использование функций в угловом выражении не рекомендуется. поэтому я советую что-то подобное, что позволит решить вашу проблему и подходит для лучших практик:

taskTypes : Observable<any>;

ngOnInit() {
 this.taskTypes = this.tasktypeService.getTaskTypes()
}

и в вашем html

<select *ngIf="taskTypes | async as taskTypes" placeholder="Tipo de Tarea" dividerColor="accent" formControlName="tasktype" #tasktype>
              <option *ngFor="let task of taskTypes" [value]="task.id">{{task.tasktype}}</option>
</select>

привет @ темки-сидали! this.taskTypes = this.tasktypeService.getTaskTypes() входит в tasktype.component ngOnInit() ? Спасибо!