Угловой: не может вернуть значение

Question

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

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 = this.authService.currRestaurant[0].id;

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

  getRestaurant() {
    return this.restaurantService.getRestaurant(this.restaurantID).toPromise().then(data => {
      this.loggedRestaurant = data;
    });

 }

  async ngOnInit() {

    await this.restaurantService.getRestaurant(this.restaurantID).subscribe(
      data => {
      this.loggedRestaurant = data;
      console.log(this.loggedRestaurant)
      })

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

    console.log(this.restaurantService.restaurantID)

  }
}

restaurant.service

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';

import { AuthService } from './auth.service'

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

  private restaurantUrl = 'xxxxxx';

  public restaurant: Restaurant;
  public loggedRestaurant: LoggedRestaurant
  public restaurantID = this.authService.currRestaurant[0].id

  constructor(private http: HttpClient, private authService: AuthService) { }

  getRestaurant(ID): Observable<LoggedRestaurant> {

    console.log('ID je razmak' + this.restaurantID);

    return this.http.post<LoggedRestaurant>(this.restaurantUrl, ID);
  }

}

auth.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { throwError, Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

import { Restaurant } from '../models/Restaurant';


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

  loginUrl = 'xxxxx';
  errorData: {};


  constructor(private http: HttpClient) { }

  redirectUrl: string;

  login(email: string, password: string) {
    var postData = {email: email, password: password};
    return this.http.post<Restaurant>(this.loginUrl, postData)
    .pipe(map(restaurant => {
        if (restaurant) {
          localStorage.setItem('currentRestaurant', JSON.stringify(restaurant));
          return  restaurant;
        }
      }),
      catchError(this.handleError)
    );
  }

  isLoggedIn() {
    if (localStorage.getItem('currentRestaurant')) {
      return true;
    }
      return false;
  }

  getAuthorizationToken() {
    const currentRestaurant = JSON.parse(localStorage.getItem('currentRestaurant'));
    return currentRestaurant.token;
  }

  logout() {
    localStorage.removeItem('currentRestaurant');
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {

      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {

      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong.
      console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
    }

    // return an observable with a user-facing error message
    this.errorData = {
      errorTitle: 'Oops! Request for document failed',
      errorDesc: 'Something bad happened. Please try again later.'
    };
    return throwError(this.errorData);
  }

  currRestaurant: Restaurant = JSON.parse(localStorage.getItem('currentRestaurant'));
  currID = this. currRestaurant.id;
}

Answer 1

Попробуйте вот так:

     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 = this.authService.currRestaurant[0].id;

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

          getRestaurant() {
            return this.restaurantService.getRestaurant(this.restaurantID).toPromise().then(data => {

          this.loggedRestaurant = data;
        });

     }

      ngOnInit() {
                  this.restaurant = this.authService.currRestaurant[0];
this.restaurantService.getRestaurant(this.restaurantID).subscribe(
          data => {
          this.loggedRestaurant = data;
          console.log(this.loggedRestaurant)
          })

        console.log(this.restaurant)
        console.log(this.loggedRestaurant)

        console.log(this.restaurantService.restaurantID)

      }
    }

restaurant.service

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';

import { AuthService } from './auth.service'

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

  private restaurantUrl = 'xxxxxx';

  public restaurant: Restaurant;
  public loggedRestaurant: LoggedRestaurant
  public restaurantID = this.authService.currRestaurant[0].id

  constructor(private http: HttpClient, private authService: AuthService) { }

  getRestaurant(ID): Observable<LoggedRestaurant> {

    console.log('ID je razmak' + this.restaurantID);

    return this.http.post<LoggedRestaurant>(this.restaurantUrl, ID);
  }

}

Answer 2

Будучи почтовым запросом, если вы хотите увидеть данные, вам нужно вернуть полный ответ.

Добавьте {observe: 'response'} к вашему запросу так:

getRestaurant(ID): Observable<HttpResponse<LoggedRestaurant>> {

  console.log('ID je razmak' + this.restaurantID);
  return this.http.post<LoggedRestaurant>(this.restaurantUrl, ID, {observe:'response'});
}

и получить его так:

this.restaurantService.getRestaurant(this.restaurantID).subscribe(
  data => {
    this.loggedRestaurant = data.body;
    console.log(this.loggedRestaurant)
  })

Дайте мне знать, если это сработало:)