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错误：未捕获（在承诺中）：错误：./AddClientComponent类中的错误AddClientComponent - 内联模板：41：12导致：找不到不同的支持对象＆＃39; [object Object]＆＃39;类型的部门＆＃39;。 NgFor仅支持绑定到Iterables，例如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

为

使用其他名称

HList

我认为它会重载HList'

中使用的类的

#departments="ngModel"

属性

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);
 }

找不到不同的支持对象＆＃39; [object Object]＆＃39;类型，Angular 2

2 个答案: