我正在尝试使用 Angular 2 beta 显示列表的小样本 这是 app.component.js 文件
(function(app) {
app.AppComponent = ng.core
.Component({
selector: 'my-app',
template:'<p>My name: {{ myName }}</p>' +
'<p>Friends:</p>' +
'<ul>' +
'<li *ng-for="#name of names">{{ name }}</li>' +
'</ul>',
directives: [angular.NgFor]
})
.Class({
constructor: function() {
this.myName = 'Peter';
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
});
})(window.app || (window.app = {}));
出现以下错误
Uncaught ReferenceError : Angular 未定义
这是 HTML 文件
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
这里使用的语法错误吗? 我从他们官方网站上的 Angular 示例页面尝试过
最佳答案
正如 Eric 在其评论中所说,不再需要将核心指令包含到您的组件中。
你的错误在于使用了ng-for
。指令的名称是 ngFor
:
template: `
<p>My name: {{ myName }}</p>
<p>Friends:</p>
<ul>
<li *ngFor="#name of names">{{ name }}</li>
</ul>
`
希望对你有帮助, 蒂埃里
关于angular - 如何使用 Javascript 在 Angular 2 中导入 ngFor?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34385566/