Angular中ngFor循环变量被识别为any而非实际类型的解决方法

以下是几种确保Visual Studio Code的IntelliSense能正确识别*ngFor循环变量类型的方法：

1. 显式类型化组件中的数组 #

在组件类里，给要遍历的数组明确标注Person[]类型，避免使用any[]或隐式类型：

import { Person } from './person.model';

export class UserListComponent {
  // 明确指定为Person数组
  people: Person[] = this.getPeople();
}

这样Angular的模板类型检查器就能通过组件属性的类型，推断出循环变量person的类型为Person。

2. 模板内显式类型断言 #

如果组件类型已经正确，但IDE仍未识别，可以在模板中通过变量别名的方式强制指定类型：

<div *ngFor="let person of people">
  <!-- 用as语法将person断言为Person类型 -->
  <div *ngIf="person as typedPerson">
    {{ typedPerson.name }} <!-- 此时typedPerson会被识别为Person类型 -->
  </div>
</div>

另一种方式是使用ng-template传递类型化的上下文：

<ng-template #personTpl let-person="person">
  {{ person.age }} <!-- 这里的person会继承上下文的Person类型 -->
</ng-template>

<div *ngFor="let person of people">
  <ng-container [ngTemplateOutlet]="personTpl" [ngTemplateOutletContext]="{ person: person }"></ng-container>
</div>

3. 开启Angular严格模板检查 #

修改tsconfig.json，启用strictTemplates和全局严格模式，让编译器和IDE进行更严格的类型校验：

{
  "compilerOptions": {
    "strict": true,
    "strictTemplates": true
  }
}

开启后，Angular会对模板中的变量类型进行强制检查，同时提升IntelliSense的类型识别精度。

4. 验证Person类型定义的正确性 #

确保Person接口/类的定义正确导出，没有语法错误：

// person.model.ts
export interface Person {
  id: number;
  fullName: string;
  email: string;
}

如果是类，确保属性和方法都有明确的类型标注，并且已正确导入到组件中。

内容的提问来源于stack exchange，提问作者Mo D Genesis