Question

我有一个用NodeJS创建的REST API，它向我发送JSON响应，并使用此响应数据来填充选择输入元素的选项：

[{"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 =数据; 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）在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）

填充的第一个选择（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>

角度-选择错误-NgFor仅支持绑定到数组等可迭代对象

1 个答案: