使用界面

Question

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

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和关键字数组，但是此代码显示编译错误，内容为：

类型“页面”和属性“关键字”上不存在属性“ id” 在“页面”类型上不存在。

Answer 1

在您的代码中，您正在初始化this.pages，其中id是 string ，而keywords是 string 。

因此，您必须定义接口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']} ];

如果您要使用班级而不是界面，请查看@Paleo答案。

Answer 2

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

使用界面

定义接口：

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

然后使用它：

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

使用课程

定义课程：

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

然后使用它：

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

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

2 个答案:

使用界面

使用课程