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

Question

здесь в hotelService я получаю данные из серверного API, которые содержат данные отеля
hotelService file

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from "@angular/common/http";
import { HotelModel } from "./hotel.model";
import {Observable, of} from "rxjs/index";
import { catchError, map, tap } from "rxjs/internal/operators";

@Injectable({
  providedIn: 'root'
})
export class HotelService {
  private hotelsUrl = 'api/hotels';  // URL to web api

  constructor(private http:HttpClient) { }

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  getHotels(): Observable<HotelModel[]>{
    return this.http.get<HotelModel[]>(this.hotelsUrl).pipe(
      catchError(this.handleError<HotelModel[]>('getHotels', []))
    )
  }

  getHotel(id:number): Observable<HotelModel>{
    const url = `${this.hotelsUrl}/${id}`;
    return this.http.get<HotelModel>(url).pipe(
      catchError(this.handleError<HotelModel>('getHotel id=${id}'))
    )
  }

  updateHotel(hotel:HotelModel): Observable<any>{
    return this.http.put<HotelModel>(this.hotelsUrl, hotel, this.httpOptions).pipe(
      catchError(this.handleError<any>('updateHotel'))
    )
  }

  deleteHotel(hotel:HotelModel):Observable<any>{
    const id = typeof hotel === 'number' ? hotel : hotel.id;
    const url = `${this.hotelsUrl}/${id}`;

    return this.http.delete<HotelModel>(url, this.httpOptions).pipe(
      catchError(this.handleError<HotelModel>('deleteHero'))
    )
  }







  private handleError<T> (operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {
    console.error(error); // log to console instead
    return of(result as T);
    };
  }


}

hotelEditComponent

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
import { Location } from "@angular/common";
import { HotelService } from "../hotel.service";
import { HotelModel } from "../hotel.model";
import {ActivatedRoute, Params} from "@angular/router";

@Component({
  selector: 'app-hotel-edit',
  templateUrl: './hotel-edit.component.html',
  styleUrls: ['./hotel-edit.component.css']
})
export class HotelEditComponent implements OnInit {

  id: number;
  editMode = false;
  hotelEditForm;

  constructor(
    private fb: FormBuilder,
    private hotelService: HotelService,
    private location: Location,
    private route: ActivatedRoute,

    ) { }

  ngOnInit() {
    // const urlId = +this.route.snapshot.paramMap.get('id');
    // this.id = urlId;
    // console.log(this.id);


    this.route.params.subscribe(
      (params: Params) => {
        this.id = +params['id'];
        this.editMode = params['id'] != null;
        this.initForm()

      }
    );

  }


  private initForm(){
    let HotelName = '';
    let HotelImagePath = '';
    let HotelPrice = '';
    let HotelDescription = '';
    let HotelAddress = '';

    if(this.editMode){
      const hotel = this.hotelService.getHotel(this.id);
      console.log(hotel);
      HotelName = hotel.name;
      HotelImagePath = hotel.imagePath;
      HotelPrice = hotel.price;
      HotelDescription = hotel.description;
      HotelAddress = hotel.address;


    }

    this.hotelEditForm = this.fb.group({
    name: [HotelName],
    imagePath:[HotelImagePath],
    price:[HotelPrice],
    description:[HotelDescription],
    address:[HotelAddress],

  });

  }


  onSubmit(){
    console.log(this.hotelEditForm)

  }



}

ошибка в методе initForm () переменной hotel, получающей один отель с использованием идентификатора в виде наблюдаемого, когда я пытаюсь получить доступ к hotel.name, hotel.price,hotel.address показывает имя неразрешенной переменной, цена, адрес что я здесь не так делаю?

 if(this.editMode){
          const hotel = this.hotelService.getHotel(this.id);
          console.log(hotel);
          HotelName = hotel.name;
          HotelImagePath = hotel.imagePath;
          HotelPrice = hotel.price;
          HotelDescription = hotel.description;
          HotelAddress = hotel.address;
        }

Answer 1

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

if(this.editMode){
      this.hotelService.getHotel(this.id).subscribe(data => {
           const hotel = data;
           console.log(hotel);
           HotelName = hotel.name;
           HotelImagePath = hotel.imagePath;
           HotelPrice = hotel.price;
           HotelDescription = hotel.description;
           HotelAddress = hotel.address;

           //update: Move formBuilder code inside subscribe as well
           this.hotelEditForm.controls['name'].setValue(HotelName);
           this.hotelEditForm.controls['imagePath'].setValue(HotelImagePath);
           this.hotelEditForm.controls['price'].setValue(HotelPrice);
          this.hotelEditForm.controls['description'].setValue(HotelDescription);
           this.hotelEditForm.controls['address'].setValue(HotelAddress);
        });

 }