2016-12-17 2 views
-2

Углового проекта Cli, в корневой папки У меня есть файл lessons.ts (для хранения данных) и в приложении папки, у меня есть урока. service.ts (для извлечения данных), код выглядит следующим образом:Угловых 2: http.get не понимают Т.С. добавочных

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs'; 

//import Lesson 
import { Lesson } from './lesson.class'; 

@Injectable() 
export class LessonService { 

    lessons=[]; 

    constructor(private http: Http) { 
     this.loadLessons(); 
    } 

    loadLessons(){ 
     this.http.get('./lessons') 
       .map(res=>res.json()) 
       .subscribe(
        lessons=>this.lessons =lessons, 
        err => console.log(err) 
       ) 
    } 
} 

Console выбрасывали сообщение об ошибке:

zone.js:1382 GET http://localhost:4200/lessons 404 (Not Found) 

, чтобы исправить это, я модифицированный lessons.service.ts

..... 
this.http.get('./lessons.ts') ->I added '.ts' for lessons file 
... 

Но браузер держать метание ошибки:

zone.js:1382 GET http://localhost:4200/lessons.ts 404 (Not Found) 

Кто-нибудь сталкивался с таким багом? Любая идея была бы оценена!

+2

, что является './lessons'? – micronyks

+0

'./lessons' - это url для файла classes.ts Я помещаю в корневую папку – Albert

+0

Почему вы используете HTTP для доступа к нему, если он находится в другом месте вашего собственного приложения? Я бы рекомендовал вам прочитать, например. https://angular.io/docs/ts/latest/tutorial/toh-pt4.html, чтобы понять, как должны работать службы. На самом деле существует пример использования статических данных в TS-файле. – jonrsharpe

ответ

0

Простой ответ был бы,

http.get('here make sure you have a valid url/path which points to 
      Webapi/Webservice/jsonfile etc..., which can actually return data').... 

В вашем случае это не является ни один из них, поэтому вы получаете сообщение об ошибке.

2

У вас есть куча проблем. Прежде всего, если бы это сработало, (это было бы не так), ваш путь неправильный в вызове http, так как вы сказали, что уроки.ts находятся в корневой папке.

И как было сказано выше, почему http, если у вас есть статические данные? Здесь может быть одно решение ...

Не знаю, как ваш урок на самом деле выглядит ... это может быть его:

export class Lesson { 
    id: number; 
    name: string; 
} 

тогда ваш файл lessons.ts может выглядеть следующим образом ... поместите его в папку приложения.

import { Lesson } from './lesson.class'; 

export const LESSONS: Lesson[] = 
    {id: 1, name: 'lesson1'}, 
    {id: 2, name: 'lesson2'} 
]; 

lesson.service.ts:

import { Injectable } from '@angular/core'; 

//import Lesson 
import { Lesson } from './lesson.class'; 
import { LESSONS } from './lessons'; 

@Injectable() 
export class LessonService { 

    loadLessons(){ 
     return LESSONS; 
    } 
} 

и компонент где вы показываете: из уроков

import { Component, OnInit } from '@angular/core'; 
import { Lesson } from './lesson.class'; 
import { LessonService } from './lesson.service'; 

export class AppComponent implements OnInit { 

    constructor(private lessonService: LessonService) { } 

    lessons: Lesson[]; 

    ngOnInit { 
     this.lessons = this.lessonService.loadLessons(); 
    } 
} 

Как и комментировали, ознакомьтесь услуги: Tour of heroes

+1

Или «return Observable.of (LESSONS)» и соответствующим образом обновить компонент, чтобы поддерживать согласованный интерфейс, если долгосрочная цель - отключить его для реального API. – jonrsharpe

+0

очень хороший пункт! – Alex

Смежные вопросы