Невозможно присвоить объект переменной Angular

Question

Итак, я пытаюсь использовать объект на моей странице html, для этого я хочу получить объект из моего API и поместить его в переменную, чтобы позже использовать его данные. Мой API работает нормально, он возвращает объект Parking, и когда я регистрирую его, он показывает необходимые данные. Когда я пытаюсь присвоить этот объект переменной и записать в журнал эту переменную, он дает мне 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 Я назвал данные объектов с {{parking.name}} ... забыли "это". должен был {{this.parking.name}}

Опубликовать его для тех, кто может наткнуться на ту же проблему.

Answer 1

Использование console.log(this.parking) находится не в том месте.

Он должен был быть внутри вызова подписки (), чтобы показать вам данные this.parking. getParking возвращает наблюдаемое, так что это асинхронный вызов c, означающий, что все, что происходит внутри вызова подписки, происходит после того, как вызов API getParking завершил выполнение. Код, выполняющийся после вызова подписки, выполняется без ожидания поступления данных.

Для этой цели вы можете проверить https://blog.logrocket.com/understanding-rxjs-observables/.

Если вы работали при вызовах AJAX старой школы вы бы записали console.log внутри функции обратного вызова AJAX onreadystatechange. Вы можете сказать, что это похоже на асинхронное поведение наблюдаемого. Onreadystatechange будет срабатывать при изменении состояния. Аналогично, подписка срабатывает, когда наблюдаемое получает следующее значение.

Answer 2

Таким образом, проблема не была обнаружена в моих файлах машинописи. Я неправильно назвал данные своего объекта в файле html, я использовал {{parking.name}} там, где это должно было быть {{this.parking.name }}

В любом случае, спасибо всем за помощь :)

Answer 3

Когда вы подписываетесь, вычисление, требуемое данными, должно выполняться внутри функции подписки ie,

   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
   }

, потому что подписка является асин c действием и, следовательно, выполнение будет выполняться только после подписки fn получает, когда наблюдаемые испускает новые данные. Возврат кода вне этого будет выполняться последовательно в главном потоке javascript.

Answer 4

Ваш console.log выполняется немедленно в ngOnInit(). Когда вы подпишетесь на значение, тело подписки будет выполнено немного позже, когда наблюдаемый ответ отправит ответ. Это должно работать:

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