Javascript Select-NgFor上的Angular-Error仅支持绑定到诸如数组之类的Iterables

我使用NodeJS创建了一个restapi，它向我发送一个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从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)
  }
}

我有另一个组件使用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>

{{task.tasktype}

当我运行所有操作时，Chrome控制台会显示以下错误：

错误：找不到不同的支持对象函数（）{ var_this=这个； this.tasktypeService.getTaskTypes（）.subscribe（函数（数据）{ _this.getTask=数据； log（_this.getTask）； }); }类型为“函数”。NgFor只支持绑定到数组之类的可重用文件。 在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]（core.js:10853） 在checkAndUpdateView（core.js:10250）上 在callViewAction上（core.js:10491）

---

第一个填充的select（this.customerService.getCustomers（））运行良好，但第二个不行。

不建议在角度表达式中使用函数。因此，我建议这样做可以解决您的问题并符合最佳实践：

taskTypes : Observable<any>;

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

任务类型：可观察；
恩戈尼尼特（）{
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>

{{task.tasktype}

this.getTask是一个对象，您只能在arrayhi@temkit sidali上使用ngFor！

this.taskTypes=this.tasktypeService.getTaskTypes（）

放入tasktype.component

ngOnInit（）

？谢谢是的，不需要函数

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