Angular 4 - >将对象推入阵列

我遇到将新对象推送到现有阵列的问题。Angular 4 - >将对象推入阵列

我所试图做的事 - > 我试图拉推到现有数组的新卡/对象

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已损坏，因为它似乎并不认为这些卡片存储在阵列中。

错误 - >尝试比较'[object Object]'错误。只有阵列和迭代被允许

不过，我附上了正在发生的事情的截图。我可以选择交易按钮，但是当我点击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" 
         } 
        ] 
       }

来源

2017-11-04 Chris Simmons

此行显得有些棘手：' this.cards.push（this.cards）;' –

这行应该改变吗？ –

真的不能说，我不知道，你想达到什么目的。 –

您可以直接使用card.cards对象在ngFor

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

</span>

来源

2017-11-04 04:19:03 Aravind

Dude omg你真了不起，谢谢！不是，我只需要学习将新卡与其他卡一起存储在阵列中。非常感谢你 –

@ChrisSimmons upvote too :)因为它帮助你 – Aravind

我很犹豫要回答，因为我有另一个大问题 –

Angular 4 - >将对象推入阵列

回答

相关问题