如何创建对象数组或使用模型，就像我们在 JSON 中一样 - 角度/离子

Question

import { Storage } from '@ionic/storage';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Route } from '@angular/router';
import { HttpClient, HttpParams } from '@angular/common/http';
import { __core_private_testing_placeholder__ } from '@angular/core/testing';
import { ModalController, NavController } from '@ionic/angular';
@Component({
selector: 'app-matchfixer',
templateUrl: './matchfixer.page.html',
styleUrls: ['./matchfixer.page.scss'],
})
export class MatchfixerPage implements OnInit {
id1: any;
id2: any;
url: string;
fixture: any[]=[];
venue: any[]=[];
venueUrl: any;
player: any[]=[];
playerUrl: any;
toss: any[]=[];
teams: any[]=[];

constructor(
private storage: Storage,
public http: HttpClient,
public navCrl: NavController
) {}
async delay(ms: number) {
await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log('fired'));
}
goconsl(){
console.log(''+this.id1+''+this.id2);
}
goback(){
this.navCrl.pop();
this.navCrl.navigateRoot('/home');
}
fetchVenue(){
this.fixture.forEach((item,index) => {
if(item.status!='NS'){  
this.venueUrl='https://cricppp.herokuapp.com/users/venue/'+item.venue_id;
this.http.get(this.venueUrl).subscribe(response => {
this.venue[index]=response["name"];
//this.venue[index]=response;
console.log('venue '+this.venue[index]+' '+index);
});
}
else
{
this.venue[index]='no venue/no match';
console.log('venue '+this.venue[index]+' '+index);
}
});
}
fetchPlayer(){
this.fixture.forEach((item,index) => {
if(item.status!='NS'){  
this.playerUrl='https://cricppp.herokuapp.com/users/player/'+item.man_of_match_id;
this.http.get(this.playerUrl).subscribe(response => {
this.player[index]=response["fullname"];
console.log('player '+this.player[index]+''+index);
});
}
else
{
this.player[index]='no pop/no match';
console.log('player '+this.player[index]+''+index);
}
});
}
fetchToss(){
this.fixture.forEach((item,index) => {
if(item.status!='NS'){  
this.http.get('https://cricppp.herokuapp.com/users/teams').subscribe(response => {
this.teams=response["teams"];
this.teams.forEach((itm,indx) => {
if(itm.id==item.toss_won_team_id){
this.toss[index]=itm.name;
console.log('toss '+this.toss[index]+''+index);
}
});
});
}
else
{
this.toss[index]='no toss/no match';
console.log('toss '+this.toss[index]+''+index);
}
});
}
ngOnInit() {
this.storage.get('team1Id').then(paras1 => {
this.id1=paras1;
});
this.storage.get('team2Id').then(paras2 => {
this.id2=paras2;
});
this.delay(1000).then(any=>{
this.url = 'https://cricppp.herokuapp.com/users/fixtures/'+this.id1+'/'+this.id2;
this.http.get(this.url).subscribe(response => {
this.fixture = response["allFixtures"];
console.log(this.fixture[0].note);
this.fetchVenue();
this.fetchPlayer();
this.fetchToss();
});
});
}
}

在这里，我有 3 个最终数组播放器[]。 投掷[]。 & 地点[] 我想使用 ngFor 在 html 中按顺序显示它们，但 ngFor 只能遍历 1 个数组 (我想像- player[0]->toss[0]->venue[0] ------- player[1]->toss[1]->venue[1]...一样显示它们 等等...

我正在研究模型和/或对象数组，但我无法获得任何工作，我想要一个像这样的模型

export class Data{
public venue: string;
public toss: string;
public player: string;
}

但是由于我是新手，我无法让它工作，每当我尝试使用 forEach 分配数据时，它都会显示错误this.data[index]未定义。 (我正在做数据：Data[]=[];((我也导入了模型( 我希望我解释正确，我想创建一个数组，其中每个元素都有 3 个适当的场地、投掷和玩家，我可以为其分配值。 喜欢this.data[index]="response from API";就像 JSON 一样，我也尝试查看对象数组，但我无法让它工作。 我也读过服务，但我无法让这个简单的东西工作，所以我也无法处理服务。 请帮忙

Answer 1

首先，您正在进行多个异步调用，这些调用可能会在不同时间完成数据获取。

因此，确定您已收到所有呼叫的所有数据是很棘手的。你可能想使用 Promise.all(( 或 RxJS 的 forkJoin((， 或类似的东西。

假设所有数据都已提取且可用，您可以根据需要创建新的Data[]数组。或者，如果所有这些数组的长度相同，那么您可以同时遍历所有这些数组。

*ngFor迭代可迭代对象(如数组(，但您也可以使用索引访问其他数组中的值。

例如

<ng-container *ngFor="let value of player; let i = index">
<div>player[i]</div>
// Can use the same index on other arrays.
<div>toss[i]</div> 
<div>venue[i]</div> 
</ng-container>

但是，如果数组的长度不同，那么您将得到undefined值。

我没有看到将数据推送到数组data[]代码，但您可以执行以下操作

var data = [];
for (let i = 0; i < player.length; i++) {
data.push({
"venue": venue[i],
"toss": toss[i],
"player": player[i]
});
}

然后使用*ngFor循环访问此data[]数组以显示值。

<ng-container *ngFor="let value of data; let i = index">
<div>data[i].player</div>
<div>data[i].toss</div> 
<div>data[i].venue</div> 
</ng-container>