相关疑难解决方法(0)

编辑:更新了Plunkr:http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq？p = preview

这部分有效:

<div *ngFor="let entry of entries | async">
  Label: {{ entry.label }}<br>
  Value: {{ entry.value }}
</div>

但我对选择框有问题,错误信息是:

无法绑定到'ngModel',因为它不是'select'的已知属性

整个组件:

//our root app component
import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `

  <select [(ngModel)]="selectValue" name="selectValue">
    <option *ngFor="let entry of entries | async" 
    [value]="entry.value">{{entry.label}}</option>
  </select>

    <div *ngFor="let entry of entries | async">
      Label: {{ entry.label }}<br>
      Value: {{ …

在尝试TDD时,我正在关注官方的Angular"Hero"快速入门教程.

https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

一旦我到达替换步骤:

<input value="{{hero.name}}" placeholder="name">

同

<input [(ngModel)]="hero.name" placeholder="name">

我的Karma测试运行器抛出以下错误:

错误:模板解析错误:无法绑定到'ngModel',因为它不是'input'的已知属性.("name:] [(ngModel)] ="hero.name"占位符="名称">"):AppComponent @ 6:23预期未定义要定义.

但是,应用程序按预期工作,我在控制台中看不到任何错误.(而且我相当自信我正确地遵循了教程,看不到任何拼写错误等)

我的app.components.ts看起来像:

import { Component } from '@angular/core';

export class Hero {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    template: `
            <h1>{{title}}</h1>
            <h2>{{hero.name}} details!</h2>
            <div><label>id: </label>{{hero.id}}</div>
            <div>
                <label>name: </label>
                <input [(ngModel)]="hero.name" placeholder="name">
            </div>
    `
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

我的app.module看起来像:

import { NgModule }      from '@angular/core';
import { …