Сервисы Angular 2?

Question

[Serp3nt]

Изучаю ангулар 2 не так давно и возник вопрос, как вызвать необходимый мне сервис.
Есть сервис :

@Injectable()
export class TaskService {
    httpAdress: string;
    constructor(private http: Http) {
        this.httpAdress= 'http://localhost:8080';
    }
getByType(id: number){
        let headers = new Headers();
        headers.append('Authorization', 'Bearer '+ JSON.parse(localStorage.getItem('token')).access_token);
        return  this.http.get(this.httpAdress+'/api/task/type/' + id,{headers: headers}).map((response: Response) => response.json());
    }

Таким образом я его вызываю в компоненте:

export class TasksComponent implements OnInit{
    model: any = {};
    type: any;
    id: number;
    constructor(
        private taskService: TaskService,
        private router:Router){}
    ngOnInit()
    {
        this.type = this.taskService.getByType(this.id);

    }
}
    }

в html файле прописываю
<p>{{type}}</p>

В итоге вижу вывод [object Object]

Так же пробовал:

this.taskService.getByType().subscribe(type => {
      this.type = type;
    },
    err => {
      console.log(err);
      return false;
    });

Это так же не дало никаких плодов
Что делаю не так? Прошу вашей помощи.

Comments

[furrya_black]

Сервис нужно указать в providers модуля компонента, сделали?

[furrya_black]

Плюс нужно импортировать в модуль компонента Http модуль

[furrya_black]

Sorry, заметил еще комменты.)

Answer 1

[sanex3339]

getByType

возвращает Observable (читайте про RxJs).

В вашем случае в классе, где используется сервис, вам нужно сделать так:

export class TasksComponent implements OnInit {
    model: any = {};
    type: any;
    id: number;
    constructor(
        private taskService: TaskService,
        private router: Router
    ) {}
  
    ngOnInit() {
        this.type = this.taskService.getByType(this.id).subscribe((type) => {
            this.type = type;
        });
    }
}

Comments

[Serp3nt]

попробовал в консоле появляются ошибки

GET http://localhost:8080/api/task/type/undefined 500 ()
core.umd.js:2837 EXCEPTION: Response with status: 500 OK for URL: http://localhost:8080/api/task/type/undefined
ErrorHandler.handleError @ core.umd.js:2837
next @ core.umd.js:6423
schedulerFn @ core.umd.js:5721
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:5713
NgZone.triggerError @ core.umd.js:6017
onHandleError @ core.umd.js:5996
ZoneDelegate.handleError @ zone.js@0.6.23?main=browser:196
Zone.runTask @ zone.js@0.6.23?main=browser:128
ZoneTask.invoke @ zone.js@0.6.23?main=browser:293
Subscriber.ts:241 Uncaught Response {_body: "{"timestamp":1491936683888,"status":500,"error":"I…\"undefined\"","path":"/api/task/type/undefined"}", status: 500, ok: false, statusText: "OK", headers: Headers…}

и по прежнему на странице выводит [object Object]

[GTRxShock]

Так у вас 500 ошибка на сервере, и this.id у вас получается undefined