Angular 4 -> Push Objects to an Array - arrays

Question

I'm having an issue with pushing a new object to an existing array.
What I am trying to do ->
I am trying to push a new card drawn into the existing array/object
app.component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
deck: any;
cards = [];
hand = 0;
cardCount: number;
constructor(private _data: DataService){
console.log("Data Service ready to query api");
};
newDeck(){
this._data.newDeck().subscribe(res => this.deck = res.json());
}
deal(cardCount){
this._data.deal(cardCount, this.deck.deck_id).subscribe(response => this.cards = response.json());
if(this.cards){
this.cards.push(this.cards);
}
}
app.component.html
<h1>New Game</h1>
<button (click)="newDeck()">Start</button>
<p>{{ deck.remaining }} cards left!</p>
<div>
<h2>Your Hand</h2>
<button (click)="deal(2)">Deal</button> <button (click)="deal(1)">Hit</button>
<img width="150" src="{{cards.cards[0].image}}">
<img width="150" src="{{cards.cards[1].image}}">
<img width="150" src="{{cards.cards[2].image}}">
<img width="150" src="{{cards.cards[3].image}}">
</div>
<!-- <div *ngFor="let card of cards">
<img src="{{card.cards.image}}" width="150px" style="padding: 50px; margin: 10px;">
</div> -->
Yes - My *ngFor is broken because it doesn't seem to believe the cards are stored in an array.
ERROR -> Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Nevertheless, I attached a screenshot of what is happening. I can select the Deal button, but when I click Hit, the counter does only pull 1 card but it is not stored in the array. Instead, it acts as a new object and displays as card.cards[0].image instead of card.cards[2].image, since there are already 2 objects in the array after clicking the deal button.
Any ideas on how to push the new cards to into the cards array? Image
It may help to see how the cards are received when called ->
{
"remaining": 50,
"deck_id": "1omsivg9l9cu",
"success": true,
"cards": [
{
"image": "http://deckofcardsapi.com/static/img/KS.png",
"images": {
"svg": "http://deckofcardsapi.com/static/img/KS.svg",
"png": "http://deckofcardsapi.com/static/img/KS.png"
},
"suit": "SPADES",
"value": "KING",
"code": "KS"
},
{
"image": "http://deckofcardsapi.com/static/img/AH.png",
"images": {
"svg": "http://deckofcardsapi.com/static/img/AH.svg",
"png": "http://deckofcardsapi.com/static/img/AH.png"
},
"suit": "HEARTS",
"value": "ACE",
"code": "AH"
}
]
}

Answer 1

You can directly use the card.cards object in your ngFor
<span *ngFor="let item of data.cards">
<img src="{{item.image}}" width="150px" style="padding: 50px; margin: 10px;">
</span>