为什么我无法访问在 ngOnInit 上设置的对象

Question

运行最近遇到了一些问题，想知道为什么我无法访问在 ngOnInit 函数中设置的对象，以便以后使用，就像在另一个函数中一样？

我想在我的 cancelAppointment() 函数中访问和使用 this.appointmentDetailId，但它是 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

为什么我无法访问在 ngOnInit 上设置的对象

Why am I unable to get access to object that was set on ngOnInit

javascript

constructor

class

ngoninit

angular