Question

我试图遵循Angular 2教程，这是在TypeScript中，但在JavaScript中。不幸的是，我遇到了麻烦，我无法找到在线搜索的解决方案。现在我在主/细节步骤。我定义了onSelect元素但是当我定义onSelect函数时，我得到了以下错误：

Uncaught TypeError: Cannot read property 'annotations' of undefined

这是我的代码：

app.component.js：

(function(app) {
app.AppComponent =
ng.core.Component({
  selector: 'my-app',
  template:`
            <h2>My Heros</h2>
            <ul class="heroes">
                <li *ngFor="let hero of Heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
                    <span class="badge">{{hero.id}}</span> {{hero.name}}
                </li>
            </ul>
            <div *ngIf="selectedHero">
                <h2>{{selectedHero.name}} details!</h2>
                <div><label>id: </label>{{selectedHero.id}}</div>
                <div>
                    <label>name: </label>
                    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
                </div>
            </div>
  `
})
.Class({
  constructor: function() {
            this.title = 'Tour of Heros'; 
            this.Heroes = Heroes; 
            this.onSelect(hero) {
                this.selectedHero = hero;
            };
  }
});
})(window.app || (window.app = {}));

function Hero (id, name) {
    this.id = id;
    this.name = name;
};

var Heroes = [
new Hero(11, 'Mr. Nice'),
new Hero(12, 'Narco'),
new Hero(13, 'Bombasto'),
new Hero(14, 'Celeritas'),
new Hero(15, 'Magneta'),
new Hero(16, 'RubberMan'),
new Hero(17, 'Dynama'),
new Hero(18, 'Dr. IQ'),
new Hero(19, 'Magma'),
new Hero(20, 'Tornado')
];

的index.html：

<html>
<head>
<title>Angular 2 QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

main.js：

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

如果删除this.onSelect(hero) {this.selectedHero = hero;};它可以正常工作，减去选择元素的能力。我尝试使用默认值定义selectedHero，但仍会出现相同的错误。如何定义onSelect函数？

Answer 1

我想

this.onSelect(hero) {

应该是

this.onSelect = function (hero) {

AngularJS 2 OnSelect返回错误

1 个答案: