Как я могу использовать / отображать эти категории в списке выбора?

Question

Я пытаюсь заполнить ионный выбор категориями из API, это объект, который я получаю , но у меня возникают проблемы с получением исключительно категорий, либо я получаю неопределенный или не получаю массив, возможно, мой интерфейс неправильный

export interface CategoryData {
 contents: QuoteCategory[];

}

export interface QuoteCategory {
 art: string;
 funny: string;
 inspire: string;
 life: string;
 love: string;
 management: string;
 sports: string;
 students: string;

}

так я подписываюсь на функцию

  getCats() {
this.api.getCategories().subscribe(data => {
  console.log(data);
});

}

Answer 1

В определении интерфейса есть небольшая проблема. Свойство categories из API является простым объектом, а не массивом. Таким образом, вы можете попробовать что-то вроде следующего

export interface QuoteCategories {
  art: string;
  funny: string;
  inspire: string;
  life: string;
  love: string;
  management: string;
  sports: string;
  students: string;
}

И вы можете использовать его как

сервис

getCategories(): Observable<QuoteCategories> {
  this.http.get('url').pipe(map(response => response['contents']['categories']));
}

компонент

categories: QuoteCategories;

getCats() {
  this.api.getCategories().subscribe(
    data => {
      this.categories = data;
      console.log(data);
    },
    error => {
      // handle error
    }
  );
}

Обновление

ngFor может l oop только через коллекции, такие как массивы. У вас есть два варианта

1. Используя keyvalue трубу

<div *ngFor="let category of categories | keyvalue">
  <span>{{ category.key }} - {{ category.value }}</span>
</div>

2. Доступ к свойствам напрямую

<span>{{ categories.art }}</span>
<span>{{ categories.funny }}</span>
<span>{{ categories.inspire }}</span>
<span>{{ categories.life }}</span>
<span>{{ categories.love }}</span>
<span>{{ categories.management }}</span>
<span>{{ categories.sports }}</span>
<span>{{ categories.students }}</span>