我想在这里遵循基本的Angular 2教程:
https://angular.io/docs/js/latest/guide/displaying-data.html
我可以使用以下代码加载角度应用并显示我的名字:
import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
selector: "my-app"
})
class AppComponent {
myName: string;
names: Array;
constructor() {
this.myName = "Neil";
}
}
bootstrap(AppComponent);
但是,当我尝试添加一个字符串数组并尝试使用ng-for显示它们时,它会抛出以下错误:
Can't bind to 'ng-forOf' since it isn't a known native property ("
Friends:
- ]*ng-for="#name of names">
{{ name }}
"): AppComponent@4:16
Property binding ng-forOf not used by any directive on an embedded template ("
Friends:
[ERROR ->]-
{{ name }}
"): AppComponent@4:12
这是代码:
import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
selector: "my-app"
})
@View({
template: `
My name: {{ myName }}
Friends:
-
{{ name }}
`,
directives: [ NgFor ]
})
class AppComponent {
myName: string;
names: Array;
constructor() {
this.myName = "Neil";
this.names = ["Tom", "Dick", "Harry"];
}
}
bootstrap(AppComponent);
我错过了什么？
如果您使用alpha 52,请查看GitHub 仓库中的CHANGELOG.md.他们将模板更改为区分大小写,ngFor而不是ng-for(类似于所有其他指令)
在> = RC.5(和最终)中 ngFor,类似的指令默认不是环境.需要明确提供它们
@NgModule({
imports: [CommonModule],
或者如果您不介意将模块锁定为仅浏览器
@NgModule({
imports: [BrowserModule],
该BrowserModule出口CommonModule喜欢也WorkerAppModule一样.
更新
所述BrowserModule应该应用程式模块中被导入,在其它模块CommonModule应当代替进口.
使用Angular 2.1.0+
看起来这是相同的,除了你应该导入BrowserModule你的应用程序模块并导入CommonModule其他模块(你不能导入BrowserModule两次路由延迟加载).
使用Angular 2 rc5:
此版本引入了NgModules,您需要BrowserModule在模块中导入才能使用ngFor,并且ngIf:
BrowserModule注册关键应用程序服务提供程序.它还包括NgIf和NgFor等常用指令,这些指令在任何模块组件模板中都可立即显示和使用.
例:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [BrowserModule],
providers: [],
exports: [],
declarations: []
})
export class MyModule { }
在Angular2 beta中ng-for是不正确的.它应该是*ngFor.
ngIf和ngFor被声明在CommonModule从@角/常见.
CommonModule提供了许多应用程序所需的常用指令,包括ngIf和ngFor.
BrowserModule导入CommonModule并重新导出它.实际效果是BrowserModule的导入器自动获取CommonModule指令.
更新您的代码如下
import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule]
})
// In HTML
更多信息Angular Module
ngFor指令的语法为
{{name}}
请注意，它不再是名称的#name，而是让名称的名称和ngFor要求*且区分大小写。
京公网安备 11010802040832号 | 京ICP备19059560号-6 