Angular项目报Property 'name' does not exist on type 'Employee[]'如何解决

问题根因 #

该报错本质是TypeScript类型推导异常，触发原因主要有两个：

1. 组件中employees变量仅声明了Employee[]类型，未做初始化，默认值为undefined，Angular开启严格模板类型检查时，会判定该变量存在空值风险，连带推导*ngFor遍历出来的employee类型异常。
2. EmployeeService中的getEmployees方法未正确声明返回值类型，导致TypeScript无法正确推导接口返回的结构。

修复步骤 #

• 第一步：给employees变量设置初始空数组
  修改app.component.ts中的变量声明代码：

// 原代码：public employees: Employee[];
// 修改为：
public employees: Employee[] = [];

这一步可以解决初始值为undefined导致的类型异常问题，绝大多数场景修改后即可消除报错。

• 第二步：检查EmployeeService的方法返回类型
  确保你的employee.service.ts中getEmployees方法的返回值声明为Observable<Employee[]>，示例如下：

import { Observable } from 'rxjs';
import { Employee } from './employee';
import { HttpClient } from '@angular/common/http';
// ...其他代码
public getEmployees(): Observable<Employee[]> {
  // 注意请求时要指定泛型为Employee[]
  return this.http.get<Employee[]>('你的请求接口地址');
}

• 第三步（可选）：模板添加空值保护
  如果还存在偶发报错，可以在模板中使用安全导航运算符规避空值问题：

<div *ngFor="let employee of employees" >
  <div>{{employee?.name}}</div>
</div>

或者在外层加空值判断：

<ng-container *ngIf="employees.length > 0">
  <div *ngFor="let employee of employees" >
    <div>{{employee.name}}</div>
  </div>
</ng-container>

完成以上修改后，编辑器即可正常识别Employee接口的属性，输入employee.会自动弹出name、id等属性的提示。

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