无法将对象分配给变量 Angular

Question

所以我试图在我的html页面中使用一个对象，为此我想从我的api中获取对象并将其放入一个变量中以便以后使用它的数据。我的 API 工作正常，它返回停车对象，当我记录它时，它会显示所需的数据。当我尝试将该对象分配给一个变量并记录该变量时，它给了我 UNDEFINED。export class ParkingdetailsComponent implements OnInit {  parking: Parking;  id: number;  constructor(    private _route: ActivatedRoute,    private _pds: ParkingDataService) { }  ngOnInit(): void {    this._route.paramMap.subscribe(params =>{      this.id = parseInt(params.get('id'));    });    this._pds.getParking$(this.id).subscribe((parking: Parking) =>{      console.log(parking); //logs the Parking object      this.parking = parking;     });    console.log(this.parking) //logs UNDEFINED  }}好的，所以我解决了我的问题，它与订阅部分没有任何关系，它确实做了我想做的事情，问题出在我的 HTML 中，我用 {{ park.name }} 调用了对象数据。 ..忘记了“这个”。应该是 {{ this.parking.name }}将其发布给可能偶然发现相同问题的其他人。

Answer 1

的用法console.log(this.parking)在错误的地方。

它应该在 subscribe() 调用中向您显示this.parking. 返回一个可观察的getParking，所以这是一个异步调用，这意味着订阅调用中发生的任何事情都发生在 getParking API 调用完成执行之后。在 subscribe 调用之后运行的代码无需等待数据到达即可运行。

为此，您可以查看https://blog.logrocket.com/understanding-rxjs-observables/ 。

如果您使用过旧式 AJAX 调用，您将在 AJAX onreadystatechange 回调函数中编写 console.log。你可以说，这类似于 observable 的异步行为。onreadystatechange 将在状态更改时触发。同样，当 observable 接收到下一个值时，订阅会被触发。

Answer 2

当您订阅数据所需的计算时，应在订阅函数内完成，即

   ngOnInit(): void {

    this._route.paramMap.subscribe(params =>{

      this.id = parseInt(params.get('id'));

    });

    this._pds.getParking$(this.id).subscribe((parking: Parking) =>{

      console.log(parking); //logs the Parking object

      this.parking = parking; 

      console.log(this.parking) //should be here

    });

    console.log(this.parking) //logs UNDEFINED

   }

因为订阅是异步活动，因此只有在订阅 fn 接收到 observable 发出新数据时才会执行。超出此范围的代码返回将在 javascript 主线程中按顺序执行。

Answer 3

所以这里的问题不在我的打字稿文件中，我没有在我的 html 文件中正确调用我的对象的数据，我使用了 {{ parking.name }} 它应该是 {{ this.parking.name }}

无论如何，谢谢大家的帮助:)

Answer 4

您console.log在 中立即执行ngOnInit()。当您订阅一个值时，订阅主体将在稍后由 observable 发出响应时执行。这应该有效：

export class ParkingdetailsComponent implements OnInit {

  parking: Parking;

  id: number;

  constructor(

    private _route: ActivatedRoute,

    private _pds: ParkingDataService) { }

  ngOnInit(): void {

    this._route.paramMap.subscribe(params =>{

      this.id = parseInt(params.get('id'));

    });

    this._pds.getParking$(this.id).subscribe((parking: Parking) =>{

      console.log(parking); //logs the Parking object

      this.parking = parking; 

      console.log(this.parking) //logs the Parking object

    });

  }

}

PS：在你的模板中也要考虑到这一点。一种解决方案是*ngIf='parking'.