title: Angular 4 -> Push Objects to an Array
body: <p>I'm having an issue with pushing a new object to an existing array. </p>
  
  <p><strong>What I am trying to do -></strong>
  I am trying to push a new card drawn into the existing array/object</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>     @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 =&gt; this.deck = res.json());
  
        }
  
        deal(cardCount){
            this._data.deal(cardCount, this.deck.deck_id).subscribe(response =&gt; this.cards = response.json());
  
            if(this.cards){
  
              this.cards.push(this.cards);
  
            }
        }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>    &lt;h1&gt;New Game&lt;/h1&gt;
      &lt;button (click)="newDeck()"&gt;Start&lt;/button&gt;
  
      &lt;p&gt;{{ deck.remaining }} cards left!&lt;/p&gt;
  
      &lt;div&gt;
        &lt;h2&gt;Your Hand&lt;/h2&gt;
          &lt;button (click)="deal(2)"&gt;Deal&lt;/button&gt; &lt;button (click)="deal(1)"&gt;Hit&lt;/button&gt;
          &lt;img width="150" src="{{cards.cards[0].image}}"&gt;
          &lt;img width="150" src="{{cards.cards[1].image}}"&gt;
          &lt;img width="150" src="{{cards.cards[2].image}}"&gt;
          &lt;img width="150" src="{{cards.cards[3].image}}"&gt;
      &lt;/div&gt;
  
      &lt;!-- &lt;div *ngFor="let card of cards"&gt;
  
          &lt;img src="{{card.cards.image}}" width="150px" style="padding: 50px; margin: 10px;"&gt;
  
      &lt;/div&gt; --&gt;
  </code></pre>
  
  <p>Yes - My <code>*ngFor</code> is broken because it doesn't seem to believe the cards are stored in an array. </p>
  
  <blockquote>
    <p>ERROR -> Error trying to diff '[object Object]'. Only arrays and iterables are allowed</p>
  </blockquote>
  
  <p>Nevertheless, I attached a screenshot of what is happening. I can select the Deal button, but when I click <code>Hit</code>, 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 <code>card.cards[0].image</code> instead of <code>card.cards[2].image</code>, since there are already 2 objects in the array after clicking the deal button. </p>
  
  <p>Any ideas on how to push the new cards to into the cards array? <a href="https://i.stack.imgur.com/D57ZV.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>It may help to see how the cards are received when called -></p>
  
  <pre><code>                {
                    "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"
                        }
                    ]
                }
  </code></pre>