Angular中model.ts数组为undefined但component.ts取值正常问题

核心是this指向绑定错误，附带2处代码写法问题：

• 你在validatorOptions中定义的校验回调是用function关键字声明的普通函数，这类函数的this是执行时动态绑定的，而非定义时绑定。Bootstrap Validator触发校验逻辑执行该回调时，函数内部的this不会指向className的类实例，会指向校验器自身上下文，Angular启用严格模式时this甚至直接为undefined，因此访问this.arrayofObjects会报undefined错误。
• 代码存在属性名拼写错误：model.ts中声明的数组属性名为arrayofObjects（末尾带s），但component.ts中push操作写的是arrayofObject（末尾缺s），属性名不匹配也会导致访问异常。
• TS语法错误：TS中类声明前不能加public修饰符，public仅用于修饰类成员，原model.ts里public class className的写法本身不符合TS语法规范。

1. 将校验回调改为箭头函数：箭头函数没有自身的this，会直接继承定义位置外层的this（也就是className类实例），从根源解决this指向问题。
2. 修正属性名拼写、类声明语法错误。

修正后的代码如下：

model.ts 修正版 #

export class className{
   public arrayofObjects: any[] = [];
   
   public validatorOptions = {
     fields: {
       fieldName: {
          validators: {
            callback: {
              // 箭头函数绑定实例this
              callback: (validator) => {
                 return {
                  valid: this.arrayofObjects.length > 0,
                  message: '至少需要添加1个对象才可提交'
                 }
              }
            }
          }
       }
     }
   }
}

component.ts 修正版 #

export class CreateComponent implements OnInit{
    object: className = new className();

    addObjectToArray(){
       let obj = getObject(); // 获取待添加对象
       // 修正属性名拼写，和model定义保持一致
       this.object.arrayofObjects.push(obj);
    }
}

补充说明：如果必须使用普通function写法，也可以在类的构造函数中手动为回调函数绑定this指向，但写法冗余，优先使用箭头函数方案。

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