Angular2网页未加载

时间:2019-04-30 14:32:12

标签: angular typescript visual-studio-code lite-server

我的Angular2网页不再加载。一切工作正常,然后在我保存了一些代码后无法加载页面。

我试图检查代码中的错误并修复了所有错误,但是我的网页仍然无法加载。

courses.component.ts

import {CourseService} from './course.service'

@Component({
    selector: 'courses',
    template: ` 
    <h2> Courses </h2>
    {{title}}
    <ul>
        <li *ngFor = "#course of courses">
        {{course}}
        </li>
    </ul>

    ` ,
    providers: [CourseService]
    // we use the backtick "`" to breakup the template into multiple lines
      // to render the title we used double curly braces also known as "interpolation"
})

export class CoursesComponent {

    // this is a module. It'll be able to be imported to other places

    title: string = "The title of the courses page";

    courses =["Course1", "Course2", "Course3"];

    constructor(courseService: CourseService) {

        this.courses = courseService.getCourses();
    }

}```

--course.service.ts--
```export class CourseService {

    getCourses() : string[] {
        return ["Course1","Course2", "Course3"];
        // this is a service class created to be used with our component
    }
}```
import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component'

@Component({
    selector: 'my-app',
    template: '<h1>My Hello Angular</h1><courses></courses>',
    directives: [CoursesComponent]
})

**app.component.ts**
```export class AppComponent { 
// the app component is the root of your application
// it controls the entire app/page

}```

Please excuse my formatting is it is not correct. Does anyone know what may be causing my web-page to no longer load?

1 个答案:

答案 0 :(得分:0)

带有#的“ #course”语法是我以前从未见过的语法。尝试这样做:

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