无法找到类型不同的支持对象'[object Object]'，Angular 2

Question

我是Angular 2的新手，并试图按照官方教程编写简单的ng-form。 如果我使用教程，从简单的数组，它工作正常：

powers = ['Really Smart', 'Super Flexible', 
     'Super Hot', 'Weather Changer']; 

但是，当我改变了它在我的自定义阵列上从http

public departments = []; 

    constructor(http: Http) { 
    http.get('/api/departments') 
     .map((res: Response) => res.json()) 
     .subscribe((departments: Array<Object>) => this.departments = departments); 
    } 

我得到一个错误：

error_handler.js:51 Error: Uncaught (in promise): Error: Error in ./AddClientComponent class AddClientComponent - inline template:41:12 caused by: Cannot find a differ supporting object '[object Object]' of type 'departments'. NgFor only supports binding to Iterables such as Arrays.

那么我的错误在哪里，我错过了什么？提前致谢。

AddClientComponent

import 'rxjs/add/operator/map'; 

import {Component} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 

import { DepartmentsComponent } from '../departments/departments.component'; 

@Component({ 
    selector: 'app-add-client', 
    templateUrl: './add-client.component.html', 
    styleUrls: ['./add-client.component.css'] 
}) 

export class AddClientComponent { 

    public departments = []; 
    public firstName = ''; 
    public lastName = ''; 
    public id = null; 

    constructor(http: Http) { 
    http.get('/api/departments') 
     .map((res: Response) => res.json()) 
     .subscribe((departments: Array<Object>) => this.departments = departments); 
    } 

    model = new Employee(
    this.id, 
    this.firstName, 
    this.lastName, 
    this.departments 
); 

    submitted = false; 

    onSubmit() { this.submitted = true; } 

    active = true; 

} 

export class Employee { 
    constructor(
    public id: number, 
    public firstName: string, 
    public lastName: string, 
    public departments: any 
) { } 
} 

HTML

<div class="container"> 
    <div [hidden]="submitted"> 
    <h1>Employee Form</h1> 
    <form *ngIf="active" (ngSubmit)="onSubmit()" #employeeForm="ngForm"> 

     <div class="form-group"> 
     <label for="firstName">First Name</label> 
     <input type="text" class="form-control" id="firstName" 
       required 
       [(ngModel)]="model.firstName" 
       name="firstName" 
       #firstName="ngModel" > 

     <div [hidden]="firstName.valid || firstName.pristine" 
      class="alert alert-danger"> 
      First Name is required 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="lastName">Last Name</label> 
     <input type="text" class="form-control" id="lastName" 
       required 
       [(ngModel)]="model.lastName" 
       name="lastName" 
       #lastName="ngModel" > 

     <div [hidden]="lastName.valid || lastName.pristine" 
      class="alert alert-danger"> 
      Last Name is required 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="departments">Department</label> 
     <select class="form-control" id="departments" 
       required 
       [(ngModel)]="model.departments" 
       name="departments" 
       #departments="ngModel" > 
      <option 
      *ngFor="let department of departments" 
      [value]="department">{{department.name}} 
      </option> 
     </select> 

     <div [hidden]="departments.valid || departments.pristine" 
      class="alert alert-danger"> 
      Department is required 
     </div> 
     </div> 

     <button type="submit" 
       class="btn btn-default" 
       [disabled]="!employeeForm.form.valid">Submit 
     </button> 
     <!--<button type="button"--> 
       <!--class="btn btn-default"--> 
       <!--(click)="newHero()">New Hero--> 
     <!--</button>--> 
    </form> 
    </div> 

    <div [hidden]="!submitted"> 
    <h2>You submitted the following:</h2> 
    <div class="row"> 
     <div class="col-xs-3">First Name</div> 
     <div class="col-xs-9 pull-left">{{ model.firstName }}</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-3">Last Name</div> 
     <div class="col-xs-9 pull-left">{{ model.lastName }}</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-3">Department</div> 
     <div class="col-xs-9 pull-left">{{ model.departments }}</div> 
    </div> 
    <br> 
    <button class="btn btn-default" (click)="submitted=false">Edit</button> 
    </div> 
</div> 

Answer 1

为

#departments="ngModel" 

使用不同的名称3210

我认为它超负荷使用的类的departments属性*ngFor

Answer 2

尝试改变类型

public departments: Array<any> = []; 

constructor(http: Http) { 
    http.get('/api/departments') 
    .map((res: Response) => res.json()) 
    .subscribe((departments: Array<any>) => this.departments = departments); 
}