Question

我关注了角度2.0教程的this链接。

我成功显示了课程列表，但是当我创建AuthorComponent时，由于以下错误，我的应用程序将不再运行：

Error: http://localhost:3000/app/components/author.service.js detected as       register but didn't execute.
Error loading http://localhost:3000/app/components/author.service.js as "./author.service" from http://localhost:3000/app/components/author.component.js
at SystemJSLoader.<anonymous> (system.src.js:3261)
at SystemJSLoader.<anonymous> (system.src.js:3526)

at SystemJSLoader.<anonymous> (system.src.js:3774)
at SystemJSLoader.<anonymous> (system.src.js:4121)
at SystemJSLoader.instantiate (system.src.js:4357)
at system.src.js:333
at Zone.run (angular2-polyfills.js:1243)
at zoneBoundFn (angular2-polyfills.js:1220)
at lib$es6$promise$$internal$$tryCatch (angular2-polyfills.js:468)
at lib$es6$promise$$internal$$invokeCallback (angular2-polyfills.js:480)

app.component.ts

import {Component} from 'angular2/core';
import {CourseComponent} from './components/course.component';
import { AuthorComponent } from './components/author.component';


@Component({
selector: 'my-app',
template: `
<h1>Test angular application</h1>
<course></course>    
<author></author>
`,
directives:[AuthorComponent,CourseComponent]
}) 
export class AppComponent { }

CourseComponent

import { Component } from 'angular2/core';
import { CourseService } from './../services/courses.service';
 @Component({
  selector:'course',
  template:`
  <h1>Courses component page</h1>
  {{ title }} 
  <ul>
    <li *ngFor="#course of courses">
    {{ course }}
    </li>
  </ul>    
  `,
  providers:[CourseService]
})

export class CourseComponent{
 title="List of Courses";
 courses;

 constructor(courseService:CourseService){
    this.courses=courseService.getCourses();
 }
}

CourseService

export class CourseService{
 getCourses():string[]{
    return ["Math","English","Science"];
 }
}

AuthorComponent

import { Component } from 'angular2/core';
import { AuthorService} from './../services/author.service';
 @Component({
 selector:'author',
 template:`
      <h3>List of Authors</h3> 
      {{title}}
<ul>
 <li *ngFor="author of authors">
    {{author}}
 </li>
</ul>
`,
 providers:[AuthorService]
 })


export class AuthorComponent{
 title="List of Authors";
 authors:string[];

 constructor(authorService:AuthorService){
    this.authors=authorService.getAuthors();
 }
}

AuthorService

export class AuthorService{

getAuthors():string[]{
    return ["Author01","Author02"];
}

}

的package.json

{
 "name": "angular_quickstart",
 "version": "1.0.0",
  "scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install" 
},  
  "license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5"
}
}

修改当然是为了药物而编辑。

Answer 1

我的问题已修复。刚刚打开编辑器，发现pharmacy.service.ts文件仍未保存。

我不知道这是否是我问题的真正原因。

Answer 2

我在Course组件中看到，您有drug而不是course

template:`
  <h1>Courses component page</h1>
  {{ title }} 
  <ul>
    <li *ngFor="#course of courses">
    {{ course }}
    </li>
  </ul>    
  `,

同样在AuthorComponent中，您忘记将#放入for循环

template:`
      <h3>List of Authors</h3> 
      {{title}}
<ul>
 <li *ngFor="#author of authors">
    {{author}}
 </li>
</ul>
`,

Answer 3

你的ngFor是错误的

  <ul>
    <li *ngFor="#course of courses">
    {{ drug }}
    </li>
  </ul>

应该是

  <ul>
    <li *ngFor="let course of courses">
     {{ course }}
    </li>
 </ul>

你也从未定义drug所以角度如何知道？

service.js被检测为寄存器但未执行

3 个答案: