Как получить доступ к массиву внутри массива объекта в Angular7?

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

Это действительно проблема новичка, но… Вот решения:

Использование интерфейса

Определение интерфейса:

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'])
]

Answer 2

В вашем коде вы инициализируете this.pages, с id в виде строки и с keywords в виде массива строки .

Таким образом, вы должны определить интерфейс 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.