Angular - Error on Select - NgFor only supports binding to Iterables such as Arrays

Question

I have an REST API created with NodeJS which sends me an JSON response and I use this response data to populate the options of a select input element:

[{"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}]

I fetch the info using HttpClient from Angular service:

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

Then next I have a component which processes the request with a function:

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() {}
}

I have another component to generate the form using 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: [''],
    })
  }

At last, in the html template I use these values to populate the select options:

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

When I run everything, the Chrome Console shows me the following error:

ERROR Error: Cannot find a differ supporting object 'function () { var _this = this; this.tasktypeService.getTaskTypes().subscribe(function (data) { _this.getTask = data; console.log(_this.getTask); }); }' of type 'function'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges (common.js:3121) at checkAndUpdateDirectiveInline (core.js:9038) at checkAndUpdateNodeInline (core.js:10306) at checkAndUpdateNode (core.js:10268) at debugCheckAndUpdateNode (core.js:10901) at debugCheckDirectivesFn (core.js:10861) at Object.eval [as updateDirectives] (NewBudgetComponent.html:60) at Object.debugUpdateDirectives [as updateDirectives] (core.js:10853) at checkAndUpdateView (core.js:10250) at callViewAction (core.js:10491)

The first populated select (this.customerService.getCustomers()) works well, but not the second one.

this.getTask is an object, you can use ngFor only over an array — Sajeetharan

sidali sidali · Accepted Answer · 2018-08-04T18:55:15

Using functions in an angular expression is not recommended. so i advice something like this which will resolves your issue and fits the best practices :

taskTypes : Observable<any>;

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

and in your 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>

Angular - Error on Select - NgFor only supports binding to Iterables such as Arrays

1 Answers