如何從 API 接收數據到 angular 中的組件 model

Question

我從 API 和 game.component.ts 中的服務游戲獲取數據我得到了我可以在卡片中顯示對象數組的數據，但我收到此錯誤：core.js:6241 錯誤錯誤：找不到不同支持'object'類型的object'[object Object]'。 NgFor 僅支持綁定到 Iterables，例如 Arrays。 在 NgForOf.ngDoCheck (common.js:4406)

還有 model Game{name:"",image:"",releaseOn:Array(0)......} 它是空的 model 沒有被使用。

 export class GamesService {
      public url;
      public game: Game[];
      constructor(
        private http: HttpClient
      ) { }
  
      getListGames():Observable<any>
      {
       return this.http.get(`https://api.rawg.io/api/games?&dates=2010-01-01,2020-12-31&page_size=20`);
      }

到組件 games.component.ts

export class GamesComponent implements OnInit {
  public games: Game;
  //public game: Game;
  public genres;
  public platforms;
  public pcIcon: string = '../assets/pc.png';
  public PC;
  public Xbox: string = '../assets/xbox.png';
  public plat: string;
  public name: string;
  public title = 'Games component';
  //public carouselExampleControls: String;
  //public index: number;

  public rating;
  public page: number = 1;
  public totalPages;
  public next;
  public prev;
  public number_pages;
  public count;
  public nextpage;

  constructor(
    private gamesService:GamesService,
    private router: Router,
  ) 
  {
    this.games = new Game('', '', [],  '', [], 1 );
    console.log(this.games);
  }
 
  ngOnInit(): void {
    this.gamesService.getListGames().subscribe( (data: any) =>{
   
      this.games = data.results;
 
      console.log(data.results[0].platforms[0]);
      data.results.forEach((game) => {
   
        game.platforms.forEach((platform)=> { 
                //your code here
                console.log(platform);
            });
    });

  });
  }

如何使用 model game.ts 從 api 獲取 object 游戲

export class Game{
      id: any;
      constructor(
        public name: string,
        public image: string,
        public releaseOn: Array<ReleaseOn>,// do it an array of releaseOn platform
        public releaseDate: string,
        public genre: Array<Genres>,// do it an array of genres
        public rating: number,
      ){}
    }
    
    export class Genres {
      genre: string
    }
    
    export class ReleaseOn {
      releaseOn: string
    }

如何在 game.component this.games = new Game('', '', [], '', [], 1 );

game-card.component.ts

<div class="card">
    <h5 class="card-title">
        {{ games.name}}
    </h5>
    <img class="card-img-top" [src]="games.background_image" alt="Card image cap">
    <div class="card-body">
        <!-- <p class="card-text"><span class="black">Release on</span> {{ game.platform.name}}</p> -->
        <p class="card-text"><span class="black">Release on</span> <span class="platform" *ngFor="let platforms of games.platforms"><img class="img-icon" *ngFor="let platforms of games.platforms.name"> {{ platforms.platform.name }}</span></p>

        <p class="card-text"><span class="black">Release date</span> {{ games.released }}</p>
        <p class="card-text"><span class="black">Genere </span><span class="platform" *ngFor="let genres of games.genres">{{ genres.name}}</span></p>
        <p class="card-text"><span class="black">Rating  <star-rating [value]="games.rating" totalstars="5" checkedcolor="yellow" uncheckedcolor="black" size="24px" readonly="false"></star-rating></span></p>

        <p class="card-text">
            <span class="badge badge-primary">  
                        {{ games.user_game }}
                    </span>
        </p>
        <div>

object 游戲來自 api

Answer 1

由於數據 model 和視圖 model 不同，需要 map 每個屬性。

嘗試這個。 我沒有測試過它，但它應該可以工作。

this.gamesService.getListGames().subscribe( (data: any) =>{
      this.games = data.results.map(item=>{
          const gameItem: Game = {
            id: item.id,
            name: item.name,
            image: item.background_image,
            releaseDate: item.released,
            rating: item.rating,
            genre: item.genres ? item.genres.map(g => ({ genre: g.name })) : [],
            releaseOn: item.platform
              ? item.platform.map(p => ({ releaseOn: p.name }))
              : []
          };
          return gameItem;
      });
    });