Angular 4 -> 将对象推送到数组

Question

我在将新对象推送到现有数组时遇到问题。

我正在尝试做什么 -> 我正在尝试将抽取的新卡推入现有 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> -->

是 - 我的 *ngFor 坏了，因为它似乎不相信卡片存储在数组中。

ERROR -> Error trying to diff '[object Object]'. Only arrays and iterables are allowed

尽管如此，我附上了正在发生的事情的屏幕截图。我可以 select Deal 按钮，但是当我点击 Hit 时，计数器只拉出 1 张牌，但它没有存储在数组中。相反，它作为一个新对象并显示为 card.cards[0].image 而不是 card.cards[2].image，因为在单击交易按钮后数组中已经有 2 个对象。

关于如何将新卡片推送到卡片数组中有什么想法吗？ Image

查看调用时如何接收卡片可能会有所帮助 ->

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

您可以直接在 ngFor

中使用 card.cards 对象

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

</span>

Angular 4 -> 将对象推送到数组

Angular 4 -> Push Objects to an Array

arrays

blackjack

angular