Question

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

我要做的是什么 - ＆gt; 我正在尝试将新卡片绘制到现有的数组/对象中

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已被破坏，因为它似乎并不相信这些卡存储在数组中。

错误 - ＆gt;尝试区分[object object]＆＃39;时出错。只允许数组和迭代

然而，我附上了正在发生的事情的截图。我可以选择交易按钮，但是当我点击Hit时，计数器只会拉1张卡但它不会存储在数组中。相反，它充当新对象并显示为card.cards[0].image而不是card.cards[2].image，因为在单击交易按钮后数组中已有2个对象。

关于如何将新卡推入卡阵列的任何想法？ Image

调用时可以看到如何接收卡片 - ＆gt;

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

您可以直接使用msg.send(socket);

中的card.cards对象

ngFor

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

1 个答案: