无法读取未定义的属性（读取 'updateLicence'）Ionic Angular

Question

我正在构建离子 angular 应用程序并且是新手（PHP 专业）

我有一个页面包含以下内容：

export class LicencesTabPage implements OnInit {

  public licencesData: any[] | void;

  constructor(
    protected licenceService: LicencesService,
    protected authService: AuthenticationService,
    protected modelController: ModalController,
    public conversions: DatetimeConversions,
  ) {
  }

  async ngOnInit() {
    this.getData();
  }

  async openDetailedModel(index) {
    const modal = await this.modelController.create({
      component: LicencesDetailedComponent,
      componentProps: {
        itemDetail: this.licencesData[index]
      }
    });

    modal.onDidDismiss().then((modelData) => {
      this.getData();
      if (modelData !== null) {
      }
    });

    return await modal.present();
  }

  protected async getData() {
    const userUUID = await this.authService.getStoredUuid();
    await this.licenceService.getLicences(userUUID).then(res => {
      this.licencesData = JSON.parse(JSON.stringify(res));
    });
  }
}

由此用户可以使用 openDetailedModel 方法打开模型组件。

这是模态组件：

export class LicencesDetailedComponent implements OnInit {

  @Input()
  public itemDetail: any = [];
  protected returnValue: any;
  public editItem = false;

  public licencesCommonFunctions: LicencesCommonFunction;


  constructor(
    protected modalController: ModalController,
  ) {
    this.licencesCommonFunctions = new LicencesCommonFunction();
  }

  ngOnInit() {
  }

  openEdit() {

  }

  closeEdit() {
    this.editItem = false;
  }

  /**
   *
   * @param form
   */
  updateLicence(form: NgForm) {
    this.itemDetail = this.licencesCommonFunctions.newItem;
    this.licencesCommonFunctions.updateLicence(form);
  }

}

从这里用户可以调用 updateLicence() 方法，该方法调用 updateLicence() insied licencesCommonFunctions class.

这是 licencesCommonFunctions 的简化版本 class

export class LicencesCommonFunction implements OnInit {

  public newItem: any;
  protected licencesService: LicencesService;


  constructor() {
  }

  ngOnInit() {
  }


  /**
   *
   * @param form
   */
  updateLicence(form: NgForm) {
      
      this.licencesService.updateLicence(this.newItem).then(() => {
          this.showToast('Updated');
      });
  }
}

如所见，updateLicence 方法是从调用 updateLicence 的模态组件调用的，它是 LicencesService 的一部分

然而，当我尝试从模态组件执行此操作时，出现以下错误：无法读取未定义的属性（读取 'updateLicence'）

但是，如果我从一个页面调用相同的方法，那么它就没有问题，所以当从模式中的任何地方调用时，LicencesService 似乎没有被注册。

我想知道是否有人知道如何解决这个问题？

Answer 1

你没有在任何地方使用依赖注入。在您的页面中，您可以这样做：

 constructor(
    protected licenceService: LicencesService,
    protected authService: AuthenticationService,
    protected modelController: ModalController,
    public conversions: DatetimeConversions,
  ) {
  }

依赖注入插入 licenseService 实例的地方。

但是，您的模态组件会尝试更新它自己的依赖项：

  constructor(
    protected modalController: ModalController,
  ) {
    this.licencesCommonFunctions = new LicencesCommonFunction();
  }

然后您的 licensesCommonFunctions 根本不会更新服务，但也不会注入它：

  protected licencesService: LicencesService;

  constructor() {
  }

所以实际上，任何通过 CommonFunction 调用 licensesService 的东西都会有问题。

我建议你的第一个停靠点是使你的通用函数可注入

@Injectable({
  providedIn: 'root'
})
export class LicencesCommonFunction {
    constructor(private licensesService : LicensesService) {
    }
}

（同时删除 OnInit，因为它仅适用于组件，不适用于服务）。然后通过构造函数使用依赖注入将其注入到您的组件中。

总的来说，了解依赖注入如何与 Angular 一起工作将对您有所帮助。如果您在 Angular 中“更新”服务，如果这些服务不是简单的静态辅助函数，那么您很可能做错了什么。

无法读取未定义的属性（读取 'updateLicence'）Ionic Angular

Cannot read properties of undefined (reading 'updateLicence') Ionic Angular

typescript

ionic-framework

angular