[英]how to receive the data from an API to a component model in angular
我从 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
由于数据 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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.