Angular：绑定自定义接口类型变量到ngModel报undefined属性读取错误

这个问题其实很常见——你只是没有初始化empresa变量而已！虽然你声明了它的类型是IEmpresas，但TypeScript默认会把未赋值的变量设为undefined，当模板尝试访问empresa.razao_social时，自然会抛出这个错误。

下面给你几种可行的解决方法：

方法1：提前初始化变量（最推荐） #

在组件里直接给empresa赋值一个符合IEmpresas接口的空对象，确保模板渲染时它已经存在：

// 直接在变量声明时初始化
private empresa: IEmpresas = { 
  nome_fantasia: '', 
  razao_social: '', 
  cnpj: '' 
};

// 或者在ngOnInit钩子中初始化（适合需要异步准备数据的场景）
ngOnInit(): void {
  this.empresa = { 
    nome_fantasia: '', 
    razao_social: '', 
    cnpj: '' 
  };
}

这样ngModel就能正常绑定到对象的属性上，不会再出现undefined的问题。

方法2：使用安全导航操作符（?.） #

如果你暂时不想初始化对象，可以在模板里用安全导航操作符，它会在访问属性前先检查对象是否存在：

<input type="text" [(ngModel)]="empresa?.razao_social" id="razao_social">

不过要注意：这种方法只是避免了报错，但如果empresa还是undefined，ngModel的双向绑定不会正常工作（因为没有实际的对象可以绑定），所以这更像是临时的规避方案，不是根本解决办法。

方法3：用*ngIf延迟渲染模板 #

如果empresa是通过API请求等异步方式获取的，可以用*ngIf先判断变量是否存在，再渲染输入框：

<div *ngIf="empresa">
  <input type="text" [(ngModel)]="empresa.razao_social" id="razao_social">
</div>

这样只有当empresa被赋值后，输入框才会出现在页面上，从根源上避免了访问undefined属性的问题。

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