Question

我正在写一个有角度的2应用程序。在快速入门教程中，一切正常，但在我的todo应用程序中，它无法正常工作。

app.component.ts

<div *ng-for='#todo of todos'>
    {{ todo.text }}
</div>

待办事项-APP-HTML

*ng-for

在我的模板中，{{ todos }}无效。即使我尝试NgFor，它也会显示所有数据。我搜索了很多，发现我应该将directives : [NgFor]核心指令传递给模板，如.ini这也无效。任何单一的帮助将不胜感激。

Answer 1

您应该*ngFor而不是*ng-for：

<div *ngFor="#todo of todos">
  {{ todo.text }}
</div>

否则，您根本不需要指定NgFor，核心和表单指令......

修改

也许您在Angular2的上下文之外加载数据。在这种情况下，您可以尝试利用NgZone类，如下所述：

class TodoAppComponent { todos : Array; constructor(private ngZone:NgZone) { this.todos = []; TodoFactory.getAll().then((data) =>{ this.ngZone.run(() => { this.todos = data; // I got JSON in todos object. }); }); } }

有关详细信息，请参阅此plunkr：https://plnkr.co/edit/KKj1br?p=preview

Answer 2

您使用哪个版本的Agular2 ????

有关最新版本，您可以尝试使用

import {Component, Template, View, bootstrap, FORM_DIRECTIVES} from 'angular2/angular2';

将它们更改为，

import {Component,View,bind} from 'angular2/core';
import {bootstrap}  from 'angular2/platform/browser';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators } from 'angular2/common'; // CORE_DIRECTIVES contains all common required API

然后，

<div *ngFor="#todo of todos">
  {{ todo.text }}
</div>

Answer 3

角度小组从beta版本中的模板指令中删除了每个破折号（ - ）。

因此：

ng-for，ng-model，ng-class，...

现在：

ngFor，ngModel，ngClass，...

使用angular2.0.0-beta.0及更多时

Answer 4

在Angular 2的RC版本中，angular团队已从 * ngFor 中的模板语法中删除了＃，并将 * ng-for 更改为 * ngFor ，使用让代替＃

以前您使用的是

<div *ng-for='#todo of todos'>
    {{ todo.text }}
</div>

你应该使用

<div *ngFor='let todo of todos'>
    {{ todo.text }}
</div>

* ng-for无法在角度2待办事项中使用

4 个答案: