Ng за то, что не передан массив

Question

Я пытался найти решение этой проблемы, но я не могу найти что-то менее 3 или 4 лет, и они не соответствуют моей проблеме. Я знаю, в чем проблема, из-за ошибки, но, похоже, не могу ее отследить, хотя я в общих чертах отмечу в своем описании ниже:

Мне нужно создать меню из массива json элементы в следующем формате:

{
    "body": [{
        "coursename": "introto1",
        "course-lesson-name": "Welcome to One! "
    }, {
        "coursename": "introto2",
        "course-lesson-name": "What is One?"
    }, {
        "coursename": "introto2",
        "course-lesson-name": "What Can We do with One?"
    }]
}

Этот ответ исходит от AWS API-шлюза, и я настроил следующую службу для обработки вызова:

menus.service .ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MenusService {

  constructor(private http: HttpClient) { }
  getLinks(){
      return this.http.get('api address');
  }  
}

Вот компонент, который использует службы:

navigation.component.ts

import { Component, OnInit } from '@angular/core';
import {  MenusService } from './../menus.service';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  links;
  constructor(private menusService: MenusService,) { }

  ngOnInit(){
    this.links = this.menusService.getLinks();
  }

}

и вот компонентное представление:

navigation.component. html

<div>
    <div class="col-sm-4" *ngFor="let links of links | async">
        <a>{{links['course-lesson-name']}}</a>
    </div>
</div>

Я подозреваю, что моя проблема заключается в услуге и способе, которым я устанавливаю получение вызова :

return this.http.get('api address');

Что мне здесь не хватает?

Вот ошибка для справки:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. 
NgFor only supports binding to Iterables such as Arrays.

Answer 1

Бьюсь об заклад, this.links разрешается в объект, а не массив.

Сделайте это в вашем ngOnInit:

ngOnInit(){
    this.links = this.menusService.getLinks();
    this.links.subscribe(data => console.log(data)); // ensure data here is an array and not an object with `{ body: [....] }`
  }

Если это объект, как упомянуто ранее, в ваш сервис, попробуйте:

getLinks(){
      return this.http.get('api address').pipe(
        map(res => res.body),
      );
}

Вы также можете сделать это на уровне компонентов, но не забудьте получить указатель на массив, а не на объект для *ngFor.