Question

我正在使用最新版本的Angular2，并遵循Angular 2网站上的官方示例。 https://angular.io/docs/ts/latest/tutorial/toh-pt2.html我正在尝试使用*ngFor解析数组并获得以下异常Template parse errors: Can't bind to 'ngFor' since it isn't a known native property。我看过其他帖子的问题是语法，但据我所知，语法没有错。

有人可以告诉我我哪里出错了。感谢!!!

app.component.ts

import {Component} from 'angular2/core';

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


@Component({
  selector: 'my-app',
  template: `
        <h1>{{title}}</h1>
        <h2>My Heroes</h2>
        <ul class="heroes">
          <li *ngFor="let hero of heroes">

          </li>
        </ul>
        <h2>{{hero.name}} details</h2>
        <div><label>id: </label>
        {{hero.id}}</div>
        <div><label>name: </label>
        <input [(ngModel)] = "hero.name" 
        placeholder="Hero Name">
        </div>
    `,
})


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

  public heroes = HEROES;
}

const HEROES:Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'bombboy'},
  {id: 14, name: 'Dr. Deseract'},
  {id: 15, name: 'Miss. Mistique'},
  {id: 16, name: 'codeopolos'},
  {id: 17, name: 'jupitarious'}
];

boot.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);

Answer 1

发生此错误的原因是您使用的是已弃用的angular 2版本。我可以通过你导入角度模块的方式告诉它。

不再需要导入ngFor或ngIf的新版本。

最重要的是，没有理由在发布候选版本之前使用任何版本构建任何内容。

Answer 2

您必须import来自图书馆的ngFor

import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';

Answer 3

感谢您的见解，我在Angular上运行了一个旧版本。现在工作正常。

|官方指南坏了？|无法绑定到'ngFor'，因为它不是已知的本机属性

app.component.ts

boot.ts

3 个答案: