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

Posted 2023-03-13

【中文标题】如何创建对象数组或使用模型，就像我们在 JSON 中一样 - Angular/Ionic

【英文标题】：how to create an array of objects OR use models, just like we have in a JSON - Angular/Ionic

【发布时间】：2020-01-19 15:58:51

【问题描述】：

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 个最终数组 player[]。折腾[]。 &场地[] 我想使用 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 一样，我也尝试查看对象数组，但我无法让它工作。 我还阅读了有关服务的信息，但我无法让这个简单的东西工作，所以我也无法处理服务。 请帮忙

【参考方案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>

【讨论】：

在不同时间获取数据在我的情况下也不是问题，我正在制作的应用程序不是什么大事，我只需要数据到达那里，以便我可以使用数据显示它可用时绑定。 Promise 和 rxjs 离我的范围有点远，我还在学习。

是的，但在您的情况下知道数据可用并不容易。如果您尝试在数据可用之前使用它，您将遇到undefined 错误。渲染视图也会引发错误，但作为一种快速而肮脏的修复，您可以使用带有多个布尔标志的 *ngIf。

我不知道 ngFor 可以用来迭代其他数组。数组长度相同（最后）“我没有看到您将数据推送到 data[] 数组的代码” - 那是因为我做不到。我会试试你建议的这些并报告，谢谢！

promise/forkjoin 对我来说太复杂了。第二种方法适用于我想要显示数据的方式。谢谢。我尝试了最后一种推送的方法，它也有效，但是我发现前一种更简单，感谢您提供这两种解决方案。

是的，我明白了。随着您的逐步进步，您可以了解 Promise 和 observables。不客气。我很高兴它有所帮助。