如何在 Angular7 中访问对象数组中的数组？

Question

我正在使用 Angular7 并且有一个自定义 class，其中包含一个数字和一个字符串数组。

export class Page {
constructor(id: number, keywords: string[]) {}
}

现在我在我的组件中创建了这个对象的数组并初始化了它。

import {Page} from '../page';
export class SearchComponent implements OnInit {
 pages: Page [];
 constructor() { }
 ngOnInit() {
 this.pages = [
  {id:'1', Keywords:['abc', 'bca','klj']},
  {id:'2', Keywords:['asas', 'aaa']},
  {id:'3', Keywords:['dasd', 'asd']}
  ];
  consol.log(this.pages[0].keywords);
  consol.log(this.pages[0].id);
 }
}

我想访问 id 和关键字数组，但此代码显示编译错误：

Property 'id' does not exist on type 'Page' and Property 'keywords' does not exist on type 'Page'.

Answer 1

在您的代码中，您正在初始化 this.pages，将 id 作为 字符串 并将 keywords 作为 [= 的数组30=]字符串.

所以你必须定义一个接口Page:

export interface Page {
  id: string;
  keywords: string[];
}

并像那样使用它，将 Keywords 更改为 keywords:

this.pages = [
  {id: '1', keywords:['abc', 'bca','klj']},
  {id: '2', keywords:['asas', 'aaa']},
  {id: '3', keywords:['dasd', 'asd']}
];

如果您想要 id 属性作为数字，请按以下步骤操作：

export interface Page {
  id: number;
  keywords: string[];
}
and use it like that, changing Keywords to keywords:

this.pages = [
  {id: 1, keywords:['abc', 'bca','klj']},
  {id: 2, keywords:['asas', 'aaa']},
  {id: 3, keywords:['dasd', 'asd']}
];

如果您想要 class 而不是接口，请查看@Paleo 的回答。

Answer 2

这确实是初学者的问题，但是...解决方案如下：

使用接口

定义接口：

export interface Page {
  id: number
  keywords: string[]
}

然后，使用它：

this.pages = [
  { id: 1, keywords: ['a', 'b'] },
  { id: 2, keywords: ['c', 'd' }
]

使用 class

定义 class:

export class Page {
  constructor(public id: number, public keywords: string[]) {}
}

然后，使用它：

this.pages = [
  new Page(1, ['a', 'b']),
  new Page(2, ['c', 'd'])
]

如何在 Angular7 中访问对象数组中的数组？

How to access array inside array of object in Angular7?

typescript

angular

angular7

使用接口

使用 class