*ng for在angular 2 todo应用程序中不工作

我正在写一个angular 2应用程序。在“快速入门”教程中，一切都正常，但在我的todo应用程序中，一切都不正常

应用程序组件.ts

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

@Component({
    selector: 'todo-app',
})

@View({
  directives : [NgFor, CORE_DIRECTIVES, FORM_DIRECTIVES]
})

@Template({
    url: 'components/todo-app/todo-app.html'
 })

class TodoAppComponent {
  todos : Array;
  constructor() {
    this.todos = [];

    TodoFactory.getAll().then((data) =>{
       this.todos = data; // I got JSON in todos object.
    });
  }
}

待办事项应用程序html

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

{{todo.text}}

---

在我的模板中，

*ng for

不起作用。即使我尝试

{{todos}}

，它也会显示所有数据。我搜索了很多，发现我应该将

NgFor

核心指令传递给模板，比如

指令：[NgFor]

这也不起作用。任何帮助都将不胜感激

您应该

*ngFor

而不是

*ng for

：

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

---

有关更多详细信息，请参阅本指南：

您应该

*ngFor

而不是

*ng for

：

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

有关更多详细信息，请参阅本指南：

您使用哪一版本的Agular2？？？

对于最新版本，您可以试试这个，

换成,

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 

那么

{{todo.text}}

您使用哪一版本的Agular2？？？

对于最新版本，您可以试试这个，

换成,

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 

那么

{{todo.text}}

angular团队在测试版中删除了模板指令中的每个破折号（-）

因此：

ng为，ng模型，ng类

现为：

ngFor、ngModel、ngClass

---

当使用angular2.0.0-beta.0及更多版本时，angular团队从beta版本的模板指令中删除了每个破折号（-）

因此：

ng为，ng模型，ng类

现为：

ngFor、ngModel、ngClass

---

在angular2的RC版本中使用angular2.0.0-beta.0及更多时，Angular团队已从*ngFor内的模板语法中删除，并将*ng for更改为*ngFor，使用let而不是

以前您使用的是

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

{{todo.text}}

你应该使用

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

{{todo.text}}

在Angular 2的RC版本中，Angular团队已从*ngFor内的模板语法中删除，并将*ng for更改为*ngFor，使用let而不是

以前您使用的是

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

{{todo.text}}

你应该使用

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

{{todo.text}}

是的，我已经尝试过同样的方法，但不幸的是没有成功。我也没有收到任何控制台错误。您如何加载数据？我正在从工厂ie

加载数据到Office

。我的意思是您是否使用外部工具？以下是一个适用于ngFor:的plunkr，因为如果您使用的工具在angular2之外实例化，区域将无法检测到更改。为了防止这种情况，你可以利用NgZone…是的，我已经尝试过同样的方法，但不幸的是没有成功。我也没有收到任何控制台错误。您如何加载数据？我正在从工厂ie

加载数据到Office

。我的意思是您是否使用外部工具？以下是一个适用于ngFor:的plunkr，因为如果您使用的工具在angular2之外实例化，区域将无法检测到更改。为了防止这种情况，您可以利用NgZone…无需向提供程序添加

NgFor

，

CORE\u指令

，

FORM\u指令

，它们是默认提供的。您收到的错误消息是什么？我在控制台中没有收到任何错误。它非常清晰。它必须与您如何获取数据有关，但您的问题中缺少该部分。

@Template

？这就像阿尔法10或更低。您应该在

@组件
或
@视图
中设置
templateUrl
。无需向提供者添加
NgFor
，
核心指令
，
表单指令
，它们是默认提供的。您收到的错误消息是什么？我在控制台中没有收到任何错误。它非常清晰。它必须与您如何获取数据有关，但您的问题中缺少该部分。
@Template
？这就像阿尔法10或更低。您应该在
@组件
或
@视图
中设置
模板URL
。