Почему я не могу получить доступ к объекту, который был установлен на ngOnInit

Question

В последнее время столкнулся с несколькими проблемами и удивился, почему я не могу получить доступ к объекту, который был установлен в функции ngOnInit для более поздних целей, как в другой функции?

Я хочу получить доступ и использовать this.appointmentDetailId в моем cancelAppointment() функция, но это undefined, Надеюсь, кто-то может помочь. Благодарю.

Вот мой код:

export class AppointmentDetailComponent implements OnInit {
  id: any;
  appointmentDetailId: any;
  appointmentDetail$: Observable<AppointmentDetails>;
  appointmentDetail: AppointmentDetails;
  pageTitle = 'Some Default Title Maybe';

  constructor(
    private route: ActivatedRoute,
    private title: Title,
    private apiService: APIService
  ) {
    this.appointmentDetailId = this.id;
    console.log(this.appointmentDetailId);
  }

  ngOnInit() {
    this.route.paramMap
      .pipe(
        tap((params: ParamMap) => {
          this.id = params.get('id');
          // Or this.id = +params.get('id'); to coerce to type number maybe
          this.pageTitle = 'Termin Details: ' + this.id;
          this.title.setTitle(this.pageTitle);
        }),
        switchMap(() => this.apiService.getAppointmentDetailsById(this.id))
      )
      .subscribe((data: AppointmentDetails) => {
        this.appointmentDetail = data;
        console.log(this.appointmentDetail);
      });
  }

  cancelAppointment() {
    console.log(this.appointmentDetailId);
    this.apiService.cancelUserAppointment(this.appointmentDetailId);
  }
}

Answer 1

В конструкторе вы установили this.appointmentDetailId = this.id который устанавливает значение в начальное значение this.id (наверное undefined);

Позже вы установите this.id = params.get('id'), но это не изменится this.appointmentDetailIdпотому что это два разных объекта.

---

Если ты хочешь this.appointmentDetailId всегда соответствовать this.id Вы должны сделать его простой оберткой, а не ее собственным объектом.

export class AppointmentDetailComponent implements OnInit {
  id: any;
  get appointmentDetailId() {
    return this.id;
  }
  set appointmentDetailId(value: any) {
    this.id = value;
  }

  // Other code
}

Использование пользовательских get а также set метод, вы все еще можете получить доступ this.appointmentDetailId как если бы это было его собственное поле - но на самом деле оно будет таким же, как this.id, Теперь любые изменения в любом поле всегда будут синхронизированы.

// Always true
this.appointmentDetailId === this.id

this.appointmentDetailId = 123;
this.appointmentDetailId === 123; // True
this.id === 123; // True;

this.id = "Test";
this.appointmentDetailId === "Test"; // True
this.id === "Test"; // True

---

В качестве альтернативы, если вы можете просто опустить метод set и тогда вы просто сможете получить доступ к тому же значению, но вы не сможете его изменить.

// Always true
this.appointmentDetailId === this.id

this.appointmentDetailId = 123; // Error

this.id = "Test";
this.appointmentDetailId === "Test"; // True
this.id === "Test"; // True