Получение неопределенного при использовании Asyn c in angular 8

Question

с использованием console.log(jobdetails) данные видны в console, но получают undefined при доступе к свойству console.log(jobdetails.id).

<div class="job-post-item p-4 d-block d-lg-flex align-items-center" *ngIf="jobdetailsdata$ | async as jobdetails">
  <div class="one-third mb-4 mb-md-0">
    <div class="job-post-item-header align-items-center">
      <span class="subadge">Partime</span> {{this.log(jobdetails.id)}}
      <h2 class="mr-3 text-black"><a href="#">{{jobdetails.name}}</a></h2>
    </div>
    <div class="job-post-item-body d-block d-md-flex">
      <div class="mr-3"><span class="icon-layers"></span> <a href="#">{{jobdetails.color}}</a></div>
      <div><span class="icon-my_location"></span> <span>{{jobdetails.pantonevalue}}</span></div>
    </div>
  </div>
</div>

URL-адрес API тестирования : Здесь это

component.ts

export class JobdetailsComponent implements OnInit {

  jobdetailsdata$: Observable<Jobdetails>;
  constructor(
     private router: Router,
     private route: ActivatedRoute,
     private jobservice: JobserviceService
              ) { }

  ngOnInit() {
    this.jobdetailsdata$ =  this.route.paramMap.pipe(
      switchMap((params: ParamMap) => this.jobservice.getJobsById(params.get('id'))
      )
    );
    // this.jobservice.getJobsById(2).subscribe(value => console.log(value));
  }

  log(val): void { console.log(val); }   
}

используемый класс:

export class Jobdetails {
    id: number;
    name: string;
    year: number;
    color: string;
    pantonevalue: string;
}

Answer 1

/* data.interface.ts */
export interface adObject{
  company: string,
  text: string,
  url: string
}

export interface dataObject{
  color: string,
  id: number,
  name: string,
  pantone_value: string,
  year: number
}

export interface jobDetail{
  ad: adObject,
  data: dataObject
} 






//Service
/* test.service.ts */
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from "@angular/common/http";

@Injectable()
export class TestService {

  constructor(private http: HttpClient){
  }

  getData(){
    return this.http.get('https://reqres.in/api/products/2');
  }

}




/* app.component.ts */
import { Component, OnInit } from '@angular/core';
import { TestService } from './test.service';
import { jobDetail } from './data-interface';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  jobDetail$: Observable<jobDetail>;

  constructor(private test: TestService){}


  ngOnInit(){
    this.jobDetail$ = this.test.getData();
  }

}

 <div class="job-post-item p-4 d-block d-lg-flex align-items-center" *ngIf="jobDetail$ | async as jd">
    <div class="one-third mb-4 mb-md-0">
      <div class="job-post-item-header align-items-center">
        <span class="subadge">Partime</span>
          {{ jd.data.id }}
        <h2 class="mr-3 text-black"><a href="#"> {{ jd.data.name }} </a></h2>
      </div>
      <div class="job-post-item-body d-block d-md-flex">
        <div class="mr-3"><span class="icon-layers"></span> <a href="#"> {{ jd.data.color }} </a>
        </div>
        <div><span class="icon-my_location"></span> <span>
                     {{ jd.data. pantone_value }}
                    </span>
        </div>
      </div>
    </div>
  </div>

Формат данных, полученных через API, {"data": {"id": 2, "name": "fuchsia rose "," year ": 2001," color ":" # C74375 "," pantone_value ":" 17-2031 "}," ad ": {" company ":" StatusCode Weekly "," url ":" http://statuscode.org/ "," text ":« Еженедельный бюллетень, посвященный разработке программного обеспечения, инфраструктуры, сервера, производительности и конца стека вещей. »}}

так, когда Вы зарегистрировали данные как

jobdetails.id, очевидно, что вы получите результат как неопределенный

*

Right путь

jobdetails.data.id

Answer 2

Нельзя использовать jobdetails.id, так как идентификатор не существует в ответе. Ваш сервис возвращает два объекта с именами data и ad, в data объекте вы можете найти свой id, поэтому вы можете получить свой id следующим образом: console.log(jobdetails.data.id)