Angular模板表单绑定ngModel报错Property does not exist on type如何解决

问题原因 #

这个报错是TypeScript静态类型检查触发的，你在组件类中将person变量的类型声明为了空对象{}，TypeScript会判定该类型的对象上不存在firstName属性，因此在编译模板阶段就抛出了类型不匹配错误。该错误和person的初始化时机无关，仅和类型定义规则相关。

解决方案 #

方案1（推荐）：自定义类型接口 #

先为person定义对应的类型接口，明确声明属性类型，可享受完整的TS类型校验能力：

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

// 新增Person类型定义
interface Person {
  firstName: string;
  lastName: string;
}

@Component({
  selector: 'app-form1',
  templateUrl: './form1.component.html',
  styleUrls: ['./form1.component.css']
})
export class Form1Component implements OnInit {
  // 将person的类型改为自定义的Person接口
  person!: Person;

  constructor() { }

  ngOnInit(): void {
    this.person = {
      firstName: 'John',
      lastName: 'Black'
    };
  }
  submitForm = (form: any) => {
  }

  clearForm = (form: any) => {
    form.reset();
    form.submitted = false;
  }
}

方案2：直接内联声明对象类型 #

如果不想单独定义接口，也可以直接在变量声明处标注对象的属性结构：

// 替换原有person声明行
person!: {firstName: string, lastName: string};

方案3（不推荐）：临时使用any类型 #

如果仅需要快速调试绕开类型检查，可以将person的类型设为any，但会丢失TS的类型校验能力：

// 替换原有person声明行
person!: any;

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