如何使用Javascript在angular 2中导入ngFor？

2023年9月10日 187次阅读

我正在尝试使用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 = {}));

我收到了以下错误

未捕获的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>

这里使用的语法是错误的吗？
我试过他们官方网站上的角度样本页面

最佳答案 正如Eric在评论中所说,不再需要将核心指令包含在您的组件中.

你的错误是使用ng-for.该指令的名称是ngFor：

template: `
  <p>My name: {{ myName }}</p>
  <p>Friends:</p>
  <ul>
    <li *ngFor="#name of names">{{ name }}</li>
  </ul>
`

希望它能帮到你,
蒂埃里

点赞