Javascript 角度返回未定义

我有API来获取数据库中某个特定餐厅的信息，但我必须通过POST请求来获取。当餐厅登录时，我成功地从auth.service和另一个API获取了

restaurantID

，但当我尝试在控制台中登录餐厅时，我得到了

未定义的
。我没有在这里显示API的权限。守则：

餐厅服务

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
从“../models/Restaurant”导入{Restaurant}；
从“../models/LoggedRestaurant”导入{LoggedRestaurant}；
从“/auth.service”导入{AuthService}
@注射的({
providedIn:'根'
})
出口级餐厅服务{
私人餐厅https://dm.dnevnimeni.com/dmnew/podacirestorana.php';
公共餐厅：餐厅；
公共loggedRestaurant:loggedRestaurant
public restaurantID=this.authService.currRestaurant[0]。id
构造函数（私有http:HttpClient，私有authService:authService）{}
getRestaurant（ID）：可见{
console.log（'ID je'+this.restaurantID）；
返回this.http.post（this.restaurantur，ID）；
}
}

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() {
     this.restaurantService.getRestaurant().subscribe(data  => {
      this.loggedRestaurant = data;
    });

  }

  ngOnInit() {
    this.getRestaurant(); // add this line
    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;

  }
}

从'@angular/core'导入{Component，OnInit}；
从“../services/auth.service”导入{AuthService}；
从“../services/restaurant.service”导入{RestaurantService}；
从“../models/Restaurant”导入{Restaurant}；
从“../models/LoggedRestaurant”导入{LoggedRestaurant}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：'app informacije'，
templateUrl:“./informacije.component.html”，
样式URL:['./informacije.component.scss']
})
导出类InformacijeComponent实现OnInit{
餐厅：餐厅；
loggedRestaurant:loggedRestaurant；
restaurantID=this.authService.currRestaurant[0].id；；
构造函数（私有restaurantService:restaurantService，私有authService:authService）{}
getRestaurant（）{
this.restaurantService.getRestaurant（）.subscribe（数据=>{
this.loggedRestaurant=数据；
});
}
恩戈尼尼特（）{
这个。getRestaurant（）；
this.restaurant=this.authService.currestaurant[0]；
console.log（this.restaurant）
console.log（this.loggedRestaurant）
this.restaurantID=this.restaurant.id；
console.log（this.restaurantID）
this.restaurantService.restaurantID=this.restaurantID；
}
}
更新
您的代码应该是这样的

因为你只需要获取数据，所以不必使用post

所以你可以改变这个

返回this.http.post（this.restaurantur，this.restaurantID）；

对此

返回this.http.get（`${this.restaurantur}/${this.restaurantID}`）；

再加上ngOnInit

ngOnInit（）{
this.restaurantService.getRestaurant（）.subscribe（数据=>{
this.loggedRestaurant=数据；
//做点别的
});

由于您的getRestaurant（）方法未在Ngonit生命周期钩子中调用，因此数据不可用
因此您的代码存在一些问题。首先，您从未实际调用
getRestaurant（）
函数，因此永远不会请求服务调用

其次，您正在处理异步代码，不能期望在运行
console.log（this.loggedRestaurant）
之前完成服务调用

我的建议是您更改函数以返回一个
可观察的
，并订阅该函数

getRestaurant(): Observable<LoggedRestaurant> {
     this.restaurantService.getRestaurant().subscribe(data  => {
      this.loggedRestaurant = data;
    });
}

试试这个：

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() {
     this.restaurantService.getRestaurant().subscribe(data  => {
      this.loggedRestaurant = data;
    });

  }

  ngOnInit() {
    this.getRestaurant(); // add this line
    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;

  }
}

可能是您使用无效输入调用REST服务。请确保REST服务以您期望的方式工作，例如CURL或POSTMAN。未定义的行从何而来？您不会在任何地方调用
getRestaurant
，因此不会请求服务调用。
loggedRestaurant
在
subscribe
回调。当调用
ngOnInit
时，它可能不可用。不管怎样，您应该遵循@TonyNgo的答案。我相信他的代码解决了您试图实现的问题，即通过订阅它返回可观察的值谢谢您的回答，但当我尝试时，控制台显示
错误类型错误：无法读取属性'l未定义的长度
请更新屏幕截图如果我不知道错误来自何处，我无法帮助您from@seven再次检查我的答案哦，对不起。Doneno，我试过了，也试过在
nfOnInit（）的开头调用
getRestaurant（）
但是仍然得到
未定义的
并且控制台抛出了一个错误，我在之前的屏幕截图中在一条评论中发布了错误当我尝试它时，控制台仍然返回
未定义的
加上控制台说您在getRestaurant（）方法中获取数据了吗。不，从
getRestaurant（）中获取数据
在组件中，我得到了
未定义的
，在服务中，我得到了
可观察的