无法访问html中的对象属性或类型记录角

Question

export class MyComponent {

    array_all: Array<{ page: any }> = [];
    array_page: Array<{ id: number, name: string }> = [];

    item: Array<{ id: number, name: string }> = [
        {
          id: 1,
          name: 'Test name'
        }
    ]

    constructor(){
        this.array_page.push({
          id: this.item.id,
          name: this.item.name
        });

        this.array_all.push({
            page: this.array_page
        });

        console.log(this.array_all.page.id);
        // error TS2339: Property 'page' does not exist on type '{ page: any; }[]'.
    }
}

<div *ngFor="let page of array_all">
    <h1>Id: {{page.id}}</h1>
    <!--
    error TS2339: Property 'id' does not exist on type '{ page: any; }'
    -->
</div>

在这里我应该怎么做才能访问属性id或名称？在搜索解决方案时，我看到了将对象转换为数组的相关内容，然后使用嵌套的*ngFor。但我不知道该怎么做。

如果您需要完整的代码，下面是我需要首先推送到数组，然后再推送到其他数组的原因：

export class AboutComponent {

  array_all: Array<{ page: any }> = [];
  array_page: Array<{ id: number, name: string, link: string, image_url: string, image_alt: string }> = [];

    constructor(){
        let start_at: number = 0;
        let last_slice: number = 0;
        for(let i: number = start_at; i < this.knowledge_items.length; i++){
          if(i%2 === 0 && i%3 === 0 && i !== last_slice){
            this.array_all.push({page: this.array_page});
            this.array_page = [];
            this.array_page.push({
              id: this.knowledge_items[i].id,
              name: this.knowledge_items[i].name,
              link: this.knowledge_items[i].link,
              image_url: this.knowledge_items[i].image_url,
              image_alt: this.knowledge_items[i].image_alt
            });
            start_at = i;
            last_slice = i;
          }
          else{
            this.array_page.push({
              id: this.knowledge_items[i].id,
              name: this.knowledge_items[i].name,
              link: this.knowledge_items[i].link,
              image_url: this.knowledge_items[i].image_url,
              image_alt: this.knowledge_items[i].image_alt
            });
            if(i === this.knowledge_items.length - 1){
              this.array_all.push({page: this.array_page});
              this.array_page = [];
            }
          }
        }
        console.log(this.array_all);
    }


    knowledge_items: Array<{id: number, name: string, link: string, image_url: string, image_alt: string }> = [
    {
      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'
    }
}

Answer 1

您编写了错误的HTML绑定来显示页面id。您的页面id位于array_all.page属性中。有关更多细节，请查看console.log()。

下面是解决你的问题的方法。

<div *ngFor="let arrayItem of array_all; let i = index">
  <div *ngFor="let item of arrayItem.page">
    <h1>Id: {{ item.id }}</h1>
  </div>
</div>

Answer 2

你的代码错了。

检查这个链接

ts文件：

export class MyComponent {

array_all: Array<{ page: any }> = [];
array_page: Array<{ id: number, name: string }> = [];

item: Array<{ id: number, name: string }> = [
    {
      id: 1,
      name: 'Test name'
    }
]

constructor(){
    this.array_page.push({
      id: this.item[0].id,
      name: this.item[0].name
    });

    this.array_all.push({
        page: [...this.array_page]
    });

    console.log(this.array_all[0].page[0].id);
}

}

HTML文件：

<div *ngFor="let page of array_all">
  <h1>Id: {{page.page.id}}</h1>
</div>