Question

我正在使用我的静态数据选择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页面加载时，我收到以下错误。

异常：未捕获（承诺）：错误：addperson / app.addperson.html：28：18错误导致：找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39; proffesion＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。

Answer 1

问题是您使用proffesion字arrayName localVariableName binding in ngMOdel ngModel

可能是因为您在<Page [...] DataContext="{Binding Source={StaticResource Locator}, Path=GalleryViewModelInstance}"> <Page.Resources> [...] <DataTemplate x:Name="FlipImageTemplate" x:DataType="gallery:IMediaAttachmentViewModel"> <Image Stretch="UniformToFill"HorizontalAlignment="Center" > <Image.Source> <BitmapImage UriSource="{Binding AttachmentViewModel.RelativeAttachmentPath, Mode=OneWay, Converter={StaticResource UriConverter}}" /> </Image.Source> </Image> </DataTemplate> <DataTemplate x:Name="FlipVideoAudioTemplate" x:DataType="gallery:IMediaAttachmentViewModel"> [...] </DataTemplate> <DataTemplate x:Name="FlipPDFTemplate" x:DataType="gallery:IMediaAttachmentViewModel" > [...] </DataTemplate> <DataTemplate x:Name="FlipOtherTemplate" > [...] </DataTemplate> <local:BigPictureDataTemplateSelector x:Key="BigPictureDataTemplateSelector" ImageTemplate="{StaticResource FlipImageTemplate}" VideoAndAudioTemplate="{StaticResource FlipVideoAudioTemplate}" PdfTemplate="{StaticResource FlipPDFTemplate}" OtherTemplate="{StaticResource FlipOtherTemplate}"/> </Page.Resources> <RelativePanel x:Name="relativePanel" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="40,40,40,40"> <FlipView x:Name="FlipView" SelectedIndex="{x:Bind ViewModel.FilpViewIndex, Mode=TwoWay}" ItemsSource="{x:Bind ViewModel.GalleryDataViewModels, Mode=TwoWay}" ItemTemplateSelector="{StaticResource BigPictureDataTemplateSelector}"> </FlipView> [...] </RelativePanel> </Page>中也分配了相同的名称。

所以到处都避免使用同名。

Answer 2

你可以在模板中尝试这样做

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

也参考这篇文章 Plunker example

在Angular2中使用静态对象数组绑定选择Angular中的下拉列表

2 个答案: