从Angular 2升级到Angular 5出现TypeError问题求助

这个问题我太熟悉了！本质是Angular 5的变更检测机制比Angular 2更严格，加上你的组件初始化时model是空值，异步加载数据前就触发了模板渲染，导致绑定model.guid时找不到model对象。结合你说的组件被调用两次（第一次空model，第二次加载数据），给你几个靠谱的解决方案：

1. 提前初始化model对象，避免undefined #

在组件类里先给model赋一个空对象（或者包含所有字段的默认值对象），这样即使数据还没加载，model也是一个存在的对象，访问model.guid只会得到undefined而不会报错。

示例代码：

// GeneralFormComponent.ts
export class GeneralFormComponent implements OnInit {
  // 初始化model为一个空对象，也可以给字段加默认值
  model: { guid?: string; /* 其他表单字段 */ } = {};

  ngOnInit() {
    // 这里写从数据库获取数据的逻辑，拿到数据后再赋值给model
    this.fetchDataFromDB().subscribe(data => {
      this.model = data;
    });
  }

  private fetchDataFromDB() {
    // 你的HTTP请求逻辑
  }
}

2. 使用安全导航操作符（?.）保护模板绑定 #

如果不想提前初始化对象，可以在模板里用?.操作符，它会在访问属性前先检查对象是否存在，避免空值报错。

修改你的input标签：

<!-- 直接用安全导航符配合双向绑定 -->
<input type="hidden" class="form-control" [(ngModel)]="model?.guid" name="guid">

如果Angular 5对双向绑定+安全导航符有兼容性问题（极少数情况），可以拆成单向绑定+事件绑定：

<input type="hidden" class="form-control" 
       [ngModel]="model?.guid" 
       (ngModelChange)="model && (model.guid = $event)" 
       name="guid">

3. 用*ngIf延迟渲染表单（最彻底的方案） #

如果整个表单都依赖model数据，可以给表单的父容器加上*ngIf="model"，这样只有当model有数据时才渲染表单，从根源上避免空值渲染的问题。

示例：

<!-- 只有model存在时才渲染表单 -->
<div *ngIf="model" class="general-form">
  <input type="hidden" class="form-control" [(ngModel)]="model.guid" name="guid">
  <!-- 其他表单元素 -->
</div>

这个方案还能避免第一次空model时的无用渲染，提升性能。

4. 排查组件被调用两次的原因 #

你提到组件被调用两次，这可能是额外的渲染触发了错误，建议排查：

• 检查路由配置，是否有重复的路径指向该组件
• 查看父组件模板，是否多次引用了<app-general-form>组件
• 有没有使用*ngIf和*ngFor的组合导致重复实例化组件
  解决重复调用的问题，能减少不必要的渲染流程。

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