Angular *ngFor遍历数组报错：Property 'characters'不存在于组件

核心问题 #

你在ngOnInit里声明的characters是局部变量，组件模板（HTML）无法访问局部变量，只能访问组件类的成员属性，这就是报错的根本原因。

具体修复步骤 #

1. 在组件类中声明成员属性 #

在组件类的顶部（ngOnInit方法之外）定义characters成员属性，指定类型为你的接口数组，让模板能够直接访问：

export class CharactersChecklistComponent implements OnInit {
  // 声明组件成员属性，模板可直接访问
  characters: Icharacters[] = [];

  constructor(private CharacterfunctionService: CharacterfunctionService) {}

  ngOnInit(): void {
    // 直接赋值给成员属性，不再用var声明局部变量
    this.characters = this.CharacterfunctionService.allStorage() as Icharacters[];
    console.log(Array.isArray(this.characters));
    console.log(this.characters);
  }
}

2. 优化服务方法的类型声明 #

给allStorage方法加上明确的返回类型，同时增加空值判断避免解析错误：

allStorage(): Icharacters[] {
  const values: Icharacters[] = [];
  const keys = Object.keys(localStorage);
  let i = keys.length;
  while (i--) {
    const tempValue = localStorage.getItem(keys[i]);
    if (tempValue) { // 防止null值导致JSON.parse报错
      const tempParsedValue = JSON.parse(tempValue) as Icharacters;
      values.push(tempParsedValue);
    }
  }
  console.log(values);
  return values;
}

3. 模板代码保持不变 #

你的HTML代码逻辑本身没问题，只要组件类有了characters成员属性，*ngFor就能正常遍历：

<div *ngFor="let character of characters"> Hello</div>

额外提示 #

• 始终给组件属性和服务方法指定明确的TypeScript类型，类型检查能提前帮你规避很多潜在问题；
• 处理localStorage数据时，必须考虑数据为空或格式错误的情况，避免运行时异常。

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