角4 - >オブジェクトを配列にプッシュ

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

      } 
     } 

アプリ.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 - > [オブジェクトオブジェクト]を比較しようとしていません。エラーです。配列とiterableのみが許可されます

しかし、私は何が起こっているのスクリーンショットを添付しました。 Dealボタンを選択することができますが、Hitをクリックすると、カウンタは1枚のカードしかプルしませんが、配列には格納されません。代わりに、新しいオブジェクトとして機能し、card.cards[2].imageの代わりにcard.cards[0].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

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

</span>