Json 使用ForkJoin同时从2个API访问数据：未定义错误

使用ForkJoin，我试图从2API访问数据

我使用forkjoin异步访问这两个数据的数据。我能够成功访问homeTeamName、awayTeamName，但在访问线路时出现错误

core.js:1521 ERROR ReferenceError: allline is not defined

api.component.html

<table class="table table-striped table-condensed table-hover">




<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="table-responsive">
        <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">

          <thead>
            <tr>
              <th>Information</th>
              <th>HomeTeam vs AwayTeam</th>
              <th>Line</th>


            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allhomeTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>

                <tbody>
            <tr>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allawayTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>



                </div>
              </div>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allline">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>



                </div>
              </div>

问询处
主队对阿瓦泰姆
线
名称
{{n}}
{{n}}
{{n}}

api.component.ts代码

import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {forkJoin} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
  selector: 'app-mlb-api',
  templateUrl: './mlb-api.component.html',
  styleUrls: ['./mlb-api.component.css']
})
export class MlbApiComponent  {
 loadedCharacter: {  homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string} = <{homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string}>{};
    allhomeTeamName;
  allawayTeamName;
  allline;
  constructor(private http: HttpClient) {

  }

  ngOnInit() {
    let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json')
    .pipe(map((re: any) => re.events));
    let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(results => {

      //(results[0] as any).name = results[1];
      //this.loadedCharacter.name = results[0].name;
      this.loadedCharacter.homeTeamName = results[0].homeTeamName;
      this.loadedCharacter.awayTeamName = results[0].awayTeamName;
     this.loadedCharacter.line = results[0][0].offers[0].outcomes[0].line;
     //this.loadedCharacter.line = results[1][0].VisitorTeam;
     //this.loadedCharacter.line = results[1][0].HomeTeam;

      //this.loadedCharacter.EventId = results[1][0].EventId[1];

      this.allNames = results[0].map(r => r.name);
      console.log(this.allNames);

      this.allhomeTeamName = results[0].map(r => r.homeTeamName);
      console.log(this.allhomeTeamName);

       this.allawayTeamName = results[0].map(r => r.awayTeamName);
      console.log(this.allawayTeamName);

       this.allline = results[0].map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
       console.log(allline);




       this.allEventId = results[1].map(r => r.EventId);
      console.log(results[1][0]);

      this.allvisitorTeam = results[0].map(r => r.VisitorTeam);
      console.log(this.allvisitorTeam);

      this.allawayTeam = results[0].map(r => r.AwayTeam);
      console.log( this.allawayTeam);

    });
  }
}

从'@angular/core'导入{Component}；
从“@angular/common/http”导入{HttpClient}
从“rxjs”导入{forkJoin}；
从“rxjs/operators”导入{map}；
@组成部分({
选择器：“应用程序mlb api”，
templateUrl:“./mlb api.component.html”，
样式URL:['./mlbapi.component.css']
})
导出类MlbApiComponent{
loadedCharacter:{homeTeamName:string，awayTeamName:string，line:string，EventId:string，visitorTeam:string，homeTeam:string}={}；
allhomeTeamName；
allawayTeamName；
allline；
构造函数（专用http:HttpClient）{
}
恩戈尼尼特（）{
让character=this.http.get（'https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json')
.pipe（映射（（re:any）=>re.events））；
让characterHomeworld=this.http.get（'https://www.fantasylabs.com/api/sportevents/3/2019_06_17');
forkJoin（[character，characterHomeworld]）。订阅（结果=>{
//（结果[0]如有）。名称=结果[1]；
//this.loadedCharacter.name=结果[0]。名称；
this.loadedCharacter.homeTeamName=结果[0]。homeTeamName；
this.loadedCharacter.awayTeamName=结果[0]。awayTeamName；
this.loadedCharacter.line=结果[0][0]。提供[0]。结果[0]。行；
//this.loadedCharacter.line=结果[1][0].VisitorTeam；
//this.loadedCharacter.line=结果[1][0]。HomeTeam；
//this.loadedCharacter.EventId=结果[1][0].EventId[1]；
this.allNames=results[0].map（r=>r.name）；
console.log（this.allNames）；
this.allhomeTeamName=results[0].map（r=>r.homeTeamName）；
console.log（this.allhomeTeamName）；
this.allawayTeamName=results[0].map（r=>r.awayTeamName）；
console.log（this.allawayTeamName）；
this.allline=results[0].map（r=>r.offers）.flat（）.map（r=>r.outcouts）.flat（）.map（o=>o.line）；
控制台日志（allline）；
this.allEventId=results[1].map（r=>r.EventId）；
console.log（结果[1][0]）；
this.allvisitorTeam=results[0].map（r=>r.VisitorTeam）；
console.log（this.allvisitorTeam）；
this.allawayTeam=results[0].map（r=>r.AwayTeam）；
console.log（this.allawayTeam）；
});
}
}

---

如何解决此错误？

您可以使用如下代码-

ngOnInit() {

    let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json')
    .pipe(map((re: any) => re.events));
    let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) => {      

      this.allNames = draftkingsResp.map(r => r.name);
      //console.log(this.allNames);

      this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      //console.log(this.allhomeTeamName);

       this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      //console.log(this.allawayTeamName);

       this.alllabel = draftkingsResp.map(r => r.offers).flat().map(o => o.label);
      //console.log(this.alllabel);

      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
       console.log(this.allline);
      //this.allline will have 'undefined' as well
      //if you want then you can filter
      this.allline = this.allline.filter(l => !!l);
      console.log(this.allline);
    });
  }

---

请参阅stackblitz-

如果执行

console.log（结果[1][0]），您会得到什么

？检查结果集并查看其结构。它给出了

{EventDetails:null，EventId:4436180，SportId:3，VisitorTeam:“坦帕湾射线队”，HomeTeam:“纽约洋基队”，…}

但如果我尝试使用

this.loadedCharacter.EventId=results[1][0]访问数据，则给出了未定义的结果。EventId我算出了EventId，你能检查一下标签吗？标签？我看不到任何与标签有关的内容。我已经更新了代码，我在页面上显示行有困难。真的，天才！！嘿，朋友，访问数据的一个问题-。如果你有空检查的话。Thanks@Karan我想你的问题在我看到它的时候已经得到了回答。