Angular - Tour of Heroes.не могу получить данные через API

Рейтинг: 1Ответов: 1Опубликовано: 16.04.2023

Не судите строго, я изучаю Angular/node.js только второй день.

Сейчас я реализую тестовый проект из документации Angular - Tour of Heroes. Дошел до последнего, шестого пункта в создании приложения, где нужно реализовать передачу данных через http.

В документации предлагается сделать это с помощью эмулирующего api модуля - In-memory Web API, но я захотел сделать эту реализацию без эмуляции, написал небольшой сервер(так же делаю это впервые, не судите строго)):

import express from 'express';
import router from "./routers.js";
const app = express();

/*app.use(express.json())*/
app.use('/api', router);


const port = process.env.PORT || 4300;

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
})

Сервер работает исправно, при get-запросе, отдает мне массив музыкантов, который я потом использую на фронтенд-стороне:

let data = [
  {id: 1, name: 'Егор Летов', description: 'Гражданская оборона', path: '/assets/img/musican/Letov.jpg'},
  {id: 2, name: 'Михаил Горшенёв', description: 'Король и Шут', path: '/assets/img/musican/gorschok.jpg'},
  {id: 3, name: 'Глеб Самойлов', description: 'Агата Кристи', path: '/assets/img/musican/samoylof.jpg'},
  {id: 4, name: 'Джимми Пейдж', description: 'Led Zeppelin', path: '/assets/img/musican/Page.jpg'},
  {id: 5, name: 'Ричи Блэкмор', description: 'Deep Purple', path: '/assets/img/musican/richi-bljekmor.jpg'},
  {id: 6, name: 'Мик Джаггер', description: 'The Rolling Stones', path: '/assets/img/musican/djagger.jpg'},
  {id: 7, name: 'Пол Маккартни', description: 'The Beatles', path: '/assets/img/musican/PoulMac.jpg'},
  {id: 8, name: 'Лиам Галлахер', description: 'Oasis', path: '/assets/img/musican/Liam.jpg'},
];


export default data;

Теперь переходим к сути проблемы, - внутри сервиса musican-service.ts реализованы следующие два метода(взяты полностью из руководства на сайте Angular):

getMusicans(): Observable<IMusican[]>{
    return this.http.get<IMusican[]>(this.musicanUrl)
      .pipe(
        tap(_ => this.log('выбираем музыкантов')),
        catchError(this.handleError<IMusican[]>('getMusicans', []))
      );
}

getMusican(id: number): Observable<IMusican>{
    const url = this.musicanUrl;
    return this.http.get<IMusican>(url).pipe(
      tap(_ => this.log(`fetched hero id=${id}`)),
      catchError(this.handleError<IMusican>(`getHero id=${id}`))
    );
}

Первый метод по запросу получает вышеуказанный массив и выводит его на сайте, с ним все хорошо, а вот второй метод не работает. Второй метод отвечает за страницу с подробным описанием музыкантов, но возвращает он просто объект Observable и на сайте в итоге я получаю следующий вид:

введите сюда описание изображения

Что мне нужно сделать с этим методом, чтобы он выводил данные корректно?

Что только я уже не перепробовал, ничего не выходит, помогите пожалуйста новичку)

На всяких случай приложу ссылку на репозиторий с проектом: https://github.com/JavNikTool/AngularDecision

Спасибо большое за внимание!

Ответы

▲ 0Принят

На сервер надо добавить соответствующий метод в routers.js, в котором указывать id музыканта:

router.get('/get/:id', (req, res) => {
  try {
    const id = req.params.id;
    //...
  } catch (e) {
    res.status(500).send(e)
  }
});

Запрос из ангуляра (из сервиса, видимо) будет выглядеть так:

const url = `${this.url}/${id}`;
return this.http.get<IMusican>(url).pipe(...) ; // Возвращаем Observable<IMusican>();

Далее, в каком-то методе компонента:

this.service.getMusican(id).subscribe(
    (m: IMusican) => this.musican = {...m};
);