Angular中HTML与TypeScript无法访问对象属性的解决方法

问题分析 #

• TypeScript中，array_all是{ page: any }类型数组，直接访问this.array_all.page.id触发TS2339错误——数组不能直接访问对象属性，需先获取数组元素，且page本身也是数组，需进一步遍历或通过索引访问。
• HTML模板中，*ngFor遍历array_all后访问page.id触发TS2339错误——遍历array_all得到的每个元素是{page: 数组}结构，page是数组而非单个带id的对象，无法直接读取id。

代码修正与实现 #

1. TypeScript代码优化 #

首先替换any为明确的类型定义，同时修正数组访问逻辑：

// 定义统一的知识项类型
interface KnowledgeItem {
  id: number;
  name: string;
  link: string;
  image_url: string;
  image_alt: string;
}

export class AboutComponent {
  array_all: Array<{ page: KnowledgeItem[] }> = [];
  array_page: KnowledgeItem[] = [];

  knowledge_items: KnowledgeItem[] = [
    {
      id: 1,
      name: 'C++',
      link: 'https://es.wikipedia.org/wiki/C%2B%2B',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png',
      image_alt: 'C++ programming language'
    },
    {
      id: 2,
      name: 'Python',
      link: 'https://es.wikipedia.org/wiki/Python',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
      image_alt: 'Python programming language'
    },
    {
      id: 3,
      name: 'C++',
      link: 'https://es.wikipedia.org/wiki/C%2B%2B',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png',
      image_alt: 'C++ programming language'
    },
    {
      id: 4,
      name: 'Python',
      link: 'https://es.wikipedia.org/wiki/Python',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
      image_alt: 'Python programming language'
    },
    {
      id: 5,
      name: 'C++',
      link: 'https://es.wikipedia.org/wiki/C%2B%2B',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png',
      image_alt: 'C++ programming language'
    },
    {
      id: 6,
      name: 'Python',
      link: 'https://es.wikipedia.org/wiki/Python',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
      image_alt: 'Python programming language'
    },
    {
      id: 7,
      name: 'C++',
      link: 'https://es.wikipedia.org/wiki/C%2B%2B',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png',
      image_alt: 'C++ programming language'
    },
    {
      id: 8,
      name: 'Python',
      link: 'https://es.wikipedia.org/wiki/Python',
      image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
      image_alt: 'Python programming language'
    }
  ];

  constructor(){
    let last_slice: number = 0;
    for(let i = 0; i < this.knowledge_items.length; i++){
      // 修正条件：同时被2和3整除即i%6===0
      if(i % 6 === 0 && i !== last_slice){
        this.array_all.push({page: [...this.array_page]}); // 用扩展运算符避免引用共享
        this.array_page = [];
      }
      this.array_page.push({...this.knowledge_items[i]});
      if(i === this.knowledge_items.length - 1){
        this.array_all.push({page: [...this.array_page]});
        this.array_page = [];
      }
      last_slice = i;
    }
    // 正确的属性访问方式：先取数组元素，再取page数组的元素
    console.log(this.array_all[0]?.page[0]?.id);
  }
}

2. HTML嵌套*ngFor实现 #

针对array_all的嵌套数组结构，使用两层*ngFor遍历：

<!-- 外层遍历array_all的每个分组 -->
<div *ngFor="let group of array_all">
  <!-- 内层遍历当前分组下的page数组元素 -->
  <div *ngFor="let item of group.page">
    <h1>Id: {{item.id}}</h1>
    <p>名称：{{item.name}}</p>
    <img [src]="item.image_url" [alt]="item.image_alt">
  </div>
</div>

核心要点 #

• 数组必须通过索引或遍历访问元素，不能直接对数组本身读取对象属性
• 嵌套*ngFor对应嵌套数组结构：外层处理一级数组，内层处理每个元素中的二级数组
• 使用明确的类型定义替代any，既能避免TS错误，也能获得代码提示

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