Angular中用方法返回值声明变量致组件崩溃，求解决方案

组件类属性初始化阶段（persoDefault = ...）执行时，personnages数组大概率还未完成数据加载（比如异步请求还没返回），此时getPersonnageByIdd("demochar")会返回undefined，访问.name就会触发Cannot read properties of undefined错误，导致组件崩溃。而直接在[ngModel]中调用方法时，Angular的变更检测会在personnages数据就绪后重新执行方法，因此不会报错。

1. 延迟初始化变量，在生命周期钩子中赋值 #

先声明变量，不要在类属性定义时直接调用方法：

persoDefault: string = '';

在ngOnInit钩子中完成赋值（此时组件已初始化，若personnages是同步数据已就绪）：

ngOnInit(): void {
  const selectedPerso = this.getPersonnageByIdd("demochar");
  // 增加判断，避免undefined访问属性
  if (selectedPerso) {
    this.persoDefault = selectedPerso.name;
  }
}

2. 异步数据场景下的处理 #

如果personnages是通过API等异步方式获取的，需要在数据返回后再执行赋值逻辑：

// 假设通过服务获取personnages数据
ngOnInit(): void {
  this.yourPersonnageService.fetchPersonnages().subscribe({
    next: (personnagesData) => {
      this.personnages = personnagesData;
      const selectedPerso = this.getPersonnageByIdd("demochar");
      if (selectedPerso) {
        this.persoDefault = selectedPerso.name;
      }
    },
    error: (error) => {
      // 按需处理请求错误
      console.error('获取角色数据失败:', error);
    }
  });
}

3. 优化工具方法（可选） #

给getPersonnageByIdd方法明确返回值类型，增加可读性和类型安全：

getPersonnageByIdd(id: string): { id: string; name: string } | undefined {
  return this.personnages.find(x => x.id === id);
}

4. 模板中使用变量绑定 #

最后在模板中直接绑定persoDefault到[ngModel]即可：

<select [(ngModel)]="persoDefault">
  <!-- 选项列表 -->
  <option *ngFor="let perso of personnages" [value]="perso.name">{{perso.name}}</option>
</select>

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