Отображение json из HTTP-запроса на модель в Angular 9

Question

Я пытался отобразить HTTP-ответ (из моего REST API, который возвращает JSON) в пользовательскую модель, которую я сделал в своем проекте Angular. Сначала я вызываю эту функцию, чтобы получить результаты от моего оставшегося API, приведя его к DHEntity (это моя модель)

  getProjectData(idDH): Observable<DHEntity>{
    return this.http.get<DHEntity>(`${environment.apiUrl}/dh/${idDH}`, {observe: 'response'})
      .pipe(map(data => data.body));
  }

json, которое я получаю из вызова (поэтому тело моего ответа) верно. Затем я вызываю другой метод для обработки информации

getData(): void {
     const idDH = +this.route.snapshot.paramMap.get('idDH');
     if (idDH){
      this.dh1Service.getProjectData(idDH).pipe( map(
        res => {this.DHlist = res}
      ));
    }

Я также попытался, как и предлагалось, напрямую подписаться, поскольку модель идентична моим результатам в конечной точке

getData(): void {
         const idDH = +this.route.snapshot.paramMap.get('idDH');
         if (idDH){
          this.dh1Service.getProjectData(idDH).subscribe(
            res => {this.DHlist = res});
        }

Кроме того к этим двум я также попробовал несколько других способов (включая использование оператора «new» с определенным конструктором), пытаясь вернуть правильную сущность: ни один из них не работает. Каждый раз, когда я получаю неопределенное значение, независимо от того, что я делаю. Похоже, Angular не может привести к указанному типу c. Моя модель состоит из нескольких классов следующим образом (для краткости я опускаю конструкторы):

export class DHEntity{
  idDH: number;
  dhinfo: DHInfo;
  dhdata: DHData[];
}

export class DHInfo {
  name: string;
  targetYear: number;
  description: string;
  decisions: DHDecisionDefinition[];
}

export class DHData {
  dec1: number;
  dec2: number;
  eval: number;
}

export class DHDecisionDefinition {
  id: number;
  description: string;
  targetY1: string;
  targetY2: string;
  targetY3: string;
  comments: string;
}

Есть ли причина, по которой я не могу правильно отобразить значения? Что я делаю неправильно? Вот один пример JSON, который я получаю из моей конечной точки: Ссылка

Answer 1

Конструкция .pipe (map ()) не подписывается на Observable, она просто устанавливает функцию отображения для возвращаемых значений.

Так что вам нужно .subscribe для Observable, возвращенного из getProjectData иначе запрос HTTP никогда не будет выполнен.

getData(): void {
     const idDH = +this.route.snapshot.paramMap.get('idDH');
     if (idDH){
      this.dh1Service.getProjectData(idDH).subscribe(
        res => {this.DHlist = res}
      );
    }

Если у вас по-прежнему будут проблемы, я предлагаю разумно использовать контрольные точки на функциях карты и т. д. c для проверки того, что формы данных соответствуют ожидаемым.

Answer 2

Я не уверен, как или где используется this.DHlist, поэтому, возможно, он еще не доступен, так как запрос все еще находится на рассмотрении. Или, возможно, вам нужен возврат из-за скобок, используемых при присвоении ему значения. От res => {this.DHlist = res} до res => {return this.DHlist = res}, или если это один оператор, то res => this.DHlist = res.

Использование subscribe() в методе getData() является правильным выбором. Это не должно быть проблемой для используемой вами модели.

Я сделал демонстрацию stackblitz, используя те же имена, что и ваш вопрос, наряду с другим примером http: смотрите здесь, Возможно, раскройте этот пример, если вы хотите продемонстрировать свою проблему дальше, и я смогу помочь вам больше.