Веб-страница Angular2 не загружается - PullRequest
Новая
       34

Веб-страница Angular2 не загружается

0 голосов
/ 30 апреля 2019

Моя веб-страница 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 голосов
/ 01 мая 2019

Синтаксис "#course" с # является синтаксисом, которого я раньше не видел. Попробуйте вместо этого сделать это: 

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