Angular-選擇時出錯-NgFor僅支持綁定到數組等Iterable

Question

我有一個使用NodeJS創建的REST API，該API向我發送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}]

我使用Angular服務中的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控制台會顯示以下錯誤：

錯誤錯誤：找不到其他支持對象'功能（）{var _this = this; this.tasktypeService.getTaskTypes（）。subscribe（function（data）{_this.getTask = data; console.log（_this.getTask）;}）; }”類型的“功能”。 NgFor僅支持綁定到Iterables，例如數組。 在NgForOf.push ../ node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges（common.js：3121）在checkAndUpdateDirectiveInline（core.js：9038）在checkAndUpdateNodeInline（core.js：10306）在（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），位於callViewAction（core.js：10491）

填充的第一個選擇（this.customerService.getCustomers（））效果很好，但第二個則不行。

Answer 1

不建議在角度表達式中使用函數。 所以我建議這樣的事情可以解決您的問題並符合最佳做法：

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>