将 Angular 中的 Select 下拉列表与 Angular2 中的静态对象数组绑定

Question

我正在将 Select DropDown 与我的静态数据绑定。

ProffesionModel.ts

export interface Proffesion {
    id : number;
    title : string;
}

app.PeopleListService.ts

import { Injectable } from '@angular/core';
import { Proffesion } from "../model/proffessionModel";

@Injectable()
export class PeopleService {
  proffesions : Proffesion[] = [
    {id : 1, title : "Teacher"},
    {id : 2, title : "Engineer"},
    {id : 3, title : "Doctor"}
  ];

  constructor() { }
  getAllProffession() : Proffesion[]{
    return this.proffesions;
  }
}

app.addperson.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Proffesion } from "../model/proffessionModel";
import { PeopleService } from "../services/app.peopleListService";

@Component({
    selector: 'add-person',
    templateUrl: 'addperson/app.addperson.html'
})

export class AddPersonComponent { 
    proffesion : Proffesion [];
    constructor(private route: ActivatedRoute, private router: Router, private peopleService:PeopleService){
        this.proffesion = peopleService.getAllProffession();
    }
}

app.addperson.html

<section>
    <form (ngSubmit)="savePerson()" #personForm="ngForm">
      <div>
        <label for="profession">Profession: </label>
        <select name="proffesion" [(ngModel)]="person.proffesion" #proffesion="ngModel">
          <option *ngFor="let p of proffesion" [value]="p.id">{{p.title}}</option>
        </select>
        </div>
      <div>
       <button type="submit" [disabled]="!personForm.form.valid">Save</button>
        </div>
    </form>
</section>
<button (click)="gotoPeoplesList()">Back to peoples list</button>

我在加载 addperson 页面时遇到以下错误。

EXCEPTION: Uncaught (in promise): Error: Error in addperson/app.addperson.html:28:18 caused by: Cannot find a differ supporting object '[object Object]' of type 'proffesion'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

你可以在模板中这样尝试

<select [(ngModel)]="person.proffesion"  >
    <option *ngFor=" let object of list_object"  value="{{object.id}}">
      {{object.name}}
     </option>
</select>

也参考这个post Plunker example

Answer 2

问题是您多次使用 proffesion 一词，例如 arrayName localVariableName binding in ngMOdel

可能是因为您也在 ngModel 中分配了相同的名称。

所以要避免同名。

将 Angular 中的 Select 下拉列表与 Angular2 中的静态对象数组绑定

Bind Select Dropdown in Angular with Static Object Array in Angular2

angular2-forms

angular2-services

angular