Angular4 Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает привязку только к Iterables, таким как массивы

Застрял с ошибкой = Не удается найти другой поддерживающий объект «[объект объекта]» типа «объект». NgFor поддерживает привязку только к Iterables, таким как Arrays.

Сервисный код =

`export class PokemonServiceService {
    constructor(private http: HttpClient) { }

    get getCards(): Observable<ICards[]>{
    return this.http.get<ICards[]>('https://api.pokemontcg.io/v1/cards?')
        }
    }
 export interface Ability {
  name: string;
  text: string;
  type: string;
   }
export interface Attack {
  cost: string[];
  name: string;
  text: string;
  damage: string;
  convertedEnergyCost: number;
}
export interface Weakness {
  type: string;
  value: string;
}
export interface Resistance {
  type: string;
  value: string;
}
export interface Card {
  id: string;
  name: string;
  nationalPokedexNumber: number;
  imageUrl: string;
  imageUrlHiRes: string;
  types: string[];
  supertype: string;
   subtype: string;
   ability: Ability;
   hp: string;
   retreatCost: string[];
   convertedRetreatCost: number;
   number: string;
  artist: string;
  rarity: string;
  series: string;
  set: string;
  setCode: string;
  text: string[];
  attacks: Attack[];
  weaknesses: Weakness[];
  resistances: Resistance[];
  evolvesFrom: string;
 }
export interface ICards {
  cards: Card[];
}

Код компонента =

`export class MainActivityComponent implements OnInit {
 PokemonData: ICards[];
 constructor(private service: PokemonServiceService ){}
 ngOnInit(): void {
 this.service.getCards.subscribe(data => this.PokemonData = data);      
            }



}`

HTML-код =

`<div class = "card" *ngIf = "PokemonData">
<div class = "card-header">Pokemon</div>
<div class = "card-block">
  <table class = "table table-hover">
      <thead>
          <tr>
              <th>Naam</th>
              <th>id</th>
              <th>hp</th>
              <th>pokedexnumer</th>

          </tr>
      </thead>
      <tbody>
          <tr *ngFor = "let d of PokemonData">      <!-- | async -->
              <td>{{d.name}}</td>
              <td>{{d.id}}</td>
              <td>{{d.hp}}</td>
              <td>{{d.nationalPokedexNumber}}</td>
          </tr>
      </tbody>
  </table>

) `

и если я использую это в своем компоненте

ngOnInit(): void {
this.service.getCards()
            .subscribe(data => {
              console.info(data);
            })

затем я получаю данные из api (карт), но если я попытаюсь отсортировать их в списке, я получаю эту ошибку = Не могу найти другой поддерживающий объект «[объект объекта]» типа «объект». NgFor поддерживает привязку только к Iterables, таким как Arrays.