angular - 如何使用 Javascript 在 Angular 2 中导入 ngFor?

标签 angular

我正在尝试使用 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/

相关文章:

angular - 应用程序主页 View 之前出现的白页

javascript - 无法获取数组的副本返回类型'必须具有返回迭代器的 '[Symbol.iterator]()' 方法

javascript - Angular 2.0 使用 new Promise() 得到错误 TypeError : promise_1. Promise is not a function

angular - 点击事件中的 ngFor 对象

html - 指标在 mat-tree Angular 中的位置

angular - E :/project/超出最大预算错误

javascript - 在 Apache 服务器上部署 Angular 2 应用程序

angular - 使用 typeof 定义类型

javascript - Angular 5/6 : Handle File Download (w/Friendly File Name) from ASP. NET 核心 API HTTP

angular - 使用 angular-cli 在我的 angular4 应用程序中正确使用 environment.ts