Угловой метод возвращает неопределенное

Question

Как новичок, я столкнулся с проблемой с Angular и Observables.У меня есть API для получения информации об одном конкретном ресторане в базе данных, но я должен получить его с помощью запроса POST.Я успешно получаю restaurantID от auth.service и другого API при входе в ресторан, но когда я пытался войти в ресторан в консоли, я получаю undefined.У меня нет разрешения показывать API здесь.Код:

restaurant.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Restaurant } from '../models/Restaurant';
import { LoggedRestaurant } from '../models/LoggedRestaurant';

@Injectable({
  providedIn: 'root'
})
export class RestaurantService {

  private restaurantUrl = 'xxxxxxxxxxxx';

  public restaurant: Restaurant;
  public loggedRestaurant: LoggedRestaurant
  public restaurantID;

  constructor(private http: HttpClient) { }

  public getRestaurant(): Observable<LoggedRestaurant> {
    return this.http.post<LoggedRestaurant>(this.restaurantUrl, this.restaurantID);
  }
}

informacije.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { RestaurantService } from '../services/restaurant.service';
import { Restaurant } from '../models/Restaurant';
import { LoggedRestaurant } from '../models/LoggedRestaurant';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-informacije',
  templateUrl: './informacije.component.html',
  styleUrls: ['./informacije.component.scss']
})
export class InformacijeComponent implements OnInit {
  restaurant: Restaurant;
  loggedRestaurant: LoggedRestaurant;
  restaurantID;

  constructor(private restaurantService: RestaurantService, private authService: AuthService ) { }

  getRestaurant() {
    return this.restaurantService.getRestaurant()

  }

  ngOnInit() {
    this.restaurant = this.authService.currRestaurant[0];
    console.log(this.restaurant)
    console.log(this.loggedRestaurant)

    this.restaurantID = this.restaurant.id;
    console.log(this.restaurantID)
    this.restaurantService.restaurantID =this.restaurantID;

  }
}

Answer 1

httpClient.post () возвращает наблюдаемое (RXJS). Так что вам нужно подписаться на это. В противном случае вы можете использовать асинхронный канал .

в вашем HTML, вы можете попробовать это,

<span>{{getRestaurant() | aync}}</span>

OR

вы можете объявить переменную в вашем ts как data , и,

this.restaurantService.getRestaurant().subscribe(payload => {
  this.data = payload;
})

и в своем html вы можете добавить,

<span *ngIf="data">{{data}}</span>

Answer 2

В ngOnInit() вызов getRestaurant следующим образом

async ngOnInit() {
  let restaurant = await this.getRestaurant().toPromise();
  ...
}

Answer 3

Вам необходимо подписаться на вызов API.
В informacije.component.ts

getRestaurant() {
    return this.restaurantService.getRestaurant()
    .subscribe(data => this.restaurant = data);
  }

Это присвоит значение, возвращаемое вашим сервисом, вашему полю restaurant в асинхронном режиме.