我想在这里遵循基本的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<string>;
constructor() {
this.myName = "Neil";
}
}
bootstrap(AppComponent);
但是,当我尝试添加一个字符串数组并尝试使用ng-for显示它们时,它会抛出以下错误:
Can't bind to 'ng-forOf' since it isn't a known native property ("
<p>Friends:</p>
<ul>
<li [ERROR ->]*ng-for="#name of names">
{{ name }}
</li>
"): AppComponent@4:16
Property binding ng-forOf not used by any directive on an embedded template ("
<p>Friends:</p>
<ul>
[ERROR ->]<li *ng-for="#name of names">
{{ name }}
</li>
"): AppComponent@4:12
这是代码:
import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
selector: "my-app"
})
@View({
template: `
<p>My name: {{ myName }}</p>
<p>Friends:</p>
<ul>
<li *ng-for="#name of names">
{{ name }}
</li>
</ul>
`,
directives: [ NgFor ]
})
class AppComponent {
myName: string;
names: Array<string>;
constructor() {
this.myName = "Neil";
this.names = ["Tom", "Dick", "Harry"];
}
}
bootstrap(AppComponent);
我错过了什么?
9 回答
如果您使用alpha 52,请查看GitHub仓库中的CHANGELOG.md . 他们将模板更改为区分大小写,而不是
ngFor
(类似于所有其他指令)像
<router-outlet>
这样的元素名称没有改变,但为了与自定义元素规范兼容,需要在自定义元素的标记名称中使用破折号 .在 >= RC.5 (and final)
ngFor
中,类似的指令默认不是环境 . 需要明确提供它们或者如果您不介意将模块锁定为仅浏览器
BrowserModule出口CommonModule也像WorkerAppModule那样 .
Update
BrowserModule
应该在app模块中导入,而在其他模块中应该导入CommonModule
.With Angular 2.1.0+
看起来这是相同的,除非您应该在应用程序模块中导入
BrowserModule
并在其他模块中导入CommonModule
(您无法使用路径延迟加载导入BrowserModule两次) .With Angular 2 rc5 :
此版本引入了NgModules,您需要在模块中导入
BrowserModule
才能使用ngFor
和ngIf
:例:
在Angular2 beta
ng-for
中是不正确的 . 它应该是*ngFor
.ngIf和ngFor在 CommonModule 中从 @angular/common 声明 .
CommonModule 贡献了许多应用程序需要的通用指令,包括ngIf和ngFor .
BrowserModule 导入 CommonModule 并重新导出它 . 实际效果是BrowserModule的导入器自动获取CommonModule指令 .
更新您的代码如下
更多信息Angular Module
ngFor指令的语法是
请注意 is no longer #name of names ,因为它是 let name of names 并且ngFor需要*并且区分大小写 .
在其他答案的背后,另一个可能的原因是你使用了一些html formatter-repacker,它将你的所有HTML(包括组件模板)转换为小写 .
对于
ngFor
和ngIf
标签,Angular模板替换是区分大小写的,至少在今天,但我不能确定下周会有什么问题 .特别是webpack插件,例如htmljs或html-minify,它们在默认设置下将所有内容转换为小写时效果很差 . 在编译的文本中双击HTML代码,它可能全部小写(如
*ngif=
...),即使在原始来源中它是正确的,也不会被接受!当然它打破了HTML5标准 .
之所以发生这种情况,是因为我们最精彩的angular2开发认为"they wish to follow html5 more closely",但总有一些令人惊讶的异常,使得angular2的工作总是越来越好 .
它也可能是由一个错字造成的 . 我刚遇到这个问题
如你所见,有 let order or orders 而不是 let order of orders
小心错字:它是
不是ng-for
不是为了
not ng-For
鉴于它在the other issue marked as a duplicate of this one上取得了如此大的成功,我的回应是收到了很多赞成票:
对于任何错过它的人来说,我也有一个问题,我输入ngif而不是ngIf(注意国会大厦'我') .