无法将下拉列表绑定到从我的服务返回的数组

Question

我有一个服务，其中包含一个获取员工列表的方法：

export class EmployeeService {
    private employeesUrl = 'http://localhost:portnum/api/employees';

    getEmployees(): Observable<IEmployee[]> {
        return this.http.get<IEmployee[]>(this.employeesUrl).catch(this.errorHandler);
    }
}

在我的组件中，我有以下代码片段，它从我的服务中获取员工列表：

employees = [];
constructor(private fb: FormBuilder, private _employeeService: EmployeeService) {
    this.transactionForm = fb.group ({
      'employee': [null, Validators.required]
    });
  }
  ngOnInit() {
    this._employeeService.getEmployees().subscribe(data => this.employees = data, error => this.errorMsg = error);
  }

在我的 html 代码中，我有一个绑定到员工列表的下拉列表：

<span style="padding-right:60px;">{{'Employee' | translate}}*
          <select [ngModel]="null" formControlName="employee" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" required >
            <option value="null" disabled selected>{{'SelectEmployee' | translate}}</option>
            <option *ngFor="let employee of employees">{{employee}}</option>
        </select>
        <p class="error-msg" *ngIf="displayErrors" name="errorMsg">
            {{'RequiredField' | translate}}</p>
    </span>

但是，我没有显示所有返回员工的下拉列表，而是收到此错误：

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.webpackJsonp../node_modules/@angular/core/esm5/core.js.DefaultIterableDiffer.diff (core.js:7495)
    at NgForOf.webpackJsonp../node_modules/@angular/common/esm5/common.js.NgForOf.ngDoCheck (common.js:2583)
    at checkAndUpdateDirectiveInline (core.js:12368)
    at checkAndUpdateNodeInline (core.js:13889)
    at checkAndUpdateNode (core.js:13832)
    at debugCheckAndUpdateNode (core.js:14725)
    at debugCheckDirectivesFn (core.js:14666)
    at Object.eval [as updateDirectives] (TransactionPortalComponent.html:23)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
    at checkAndUpdateView (core.js:13798)

该对象是一个数组，所以我不确定为什么它说只允许数组和可迭代对象。我在上面做错了什么？

编辑：

来自 api 的响应应如下所示：

{
    _employeeList :
    [{
        _employeeKey : ""employee1""
    },
    {
        _employeeKey : ""employee2""
    }],
   _errorDetails :
   {
        _message : ""successful"",
       _status : 200
   }
}

但我只回来 [] 数组。

它是否与我的界面有关？

：

export interface IEmployee {
    employee: string;
}

Answer 1

我认为你做循环的方式是错误的，因为你想为每个员工都有一个标签<option>。

此外，由于您的数组可能为空，您可以先检查数组是否包含数据。也许您可以考虑使用<ng-template>和ng-container。

由于此响应来自您的 api，您必须进行以下更改：

服务

API 返回的是 JSON 而不是数组

getEmployees(): Observable<any> {
        return this.http.get<any>(this.employeesUrl).catch(this.errorHandler);
    }

元件

获取数组

ngOnInit() {
    this._employeeService.getEmployees().subscribe(data => this.employees = data._employeeList, error => this.errorMsg = error);
  }

模板

由于您不想显示对象本身，而是显示其值，因此可以执行以下操作：

 <ng-container *ngIf="employees?.length>0">
  <ng-template ngFor let-employee [ngForOf]="employees">
   <option>{{employee._employeeKey}}</option>
  </ng-template>
 </div>

Answer 2

在你的构造函数中，你已经将服务注入为_employeeService，但在你的ngOnInit((方法中，你调用的是this._transactionService.getEmployees((。它应该是this._employeeService.getEmployees((。