Angular中ngOnInit内嵌套函数无法被模板按钮调用问题求助

Angular 组件仅支持访问直接定义在组件类顶级作用域下的属性与方法，你将Edit_Pro函数及内部的getFirst逻辑嵌套定义在ngOnInit的局部作用域中，这些方法无法挂载到组件实例this上，外部调用时就会抛出this.getFirst is not a function错误，同时HTML模板也只能绑定类顶级作用域下的方法。

• 将原本嵌套在ngOnInit/Edit_Pro内部的方法、全局变量全部抽离到组件类的顶级作用域下，定义为类成员
• 如果Edit_Pro是初始化阶段需要执行的逻辑，仅在ngOnInit中调用该方法即可，不要把方法定义写在ngOnInit内部
• 确保按钮绑定的grabFirst方法也定义在类顶级作用域下

editprofile.page.ts 代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-editprofile',
  templateUrl: './editprofile.page.html',
  styleUrls: ['./editprofile.page.scss'],
})
export class EditprofilePage implements OnInit {
  // 全局共享的用户信息变量定义为类成员
  firstName: string = '';

  constructor() { }

  ngOnInit() {
    // 初始化时执行Edit_Pro逻辑，不要在这里定义方法
    this.Edit_Pro();
  }

  // Edit_Pro抽离为类成员方法
  Edit_Pro() {
    // 此处替换为你实际的用户信息获取逻辑，比如接口请求、本地存储读取等
    this.firstName = '测试用户';
  }

  // getFirst抽离为类成员方法
  getFirst() {
    return this.firstName;
  }

  // 按钮触发的方法定义为类成员
  grabFirst() {
    console.log(this.getFirst());
  }
}

editprofile.page.html 代码 #

<!-- 直接绑定类下的grabFirst方法即可正常触发 -->
<button (click)="grabFirst()">打印用户firstName</button>

如果Edit_Pro内部包含异步请求获取用户信息的逻辑，仅需要在异步回调中给this.firstName赋值即可，方法调用不会再出现不存在的错误，未拿到数据时只会输出undefined。

内容的提问来源于stack exchange，提问作者Nabil Mehtab