Angular 4 -> Push-объекты в массив

Question

У меня проблема с перемещением нового объекта в существующий массив.

Что я пытаюсь сделать -> Я пытаюсь вставить новую карту, вставленную в существующий массив / объект

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> -->

Да мой *ngFor сломан, потому что кажется, что карты не хранятся в массиве.

ОШИБКА -> Ошибка при попытке изменить '[объект объекта]'. Разрешены только массивы и итерации

Тем не менее, я приложил скриншот того, что происходит. Я могу выбрать кнопку сделки, но когда я нажимаю Hitсчетчик тянет только 1 карту, но она не сохраняется в массиве. Вместо этого он действует как новый объект и отображается как card.cards[0].image вместо card.cards[2].image, так как уже есть 2 объекта в массиве после нажатия кнопки сделки.

Любые идеи о том, как вставить новые карты в массив карт? Образ

Это может помочь увидеть, как карты принимаются при вызове ->

                {
                  "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

Вы можете напрямую использовать card.cards объект в вашем ngFor

<span *ngFor="let item of data.cards">
      <img src="{{item.image}}" width="150px" style="padding: 50px; margin: 10px;">

</span>