![row row](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了使用 ForkJoin 同时访问来自 2 个 API 的数据:未定义错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用 ForkJoin 我试图从 2 API 访问数据
https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json
https://www.fantasylabs.com/api/sportevents/3/2019_06_17
我正在使用 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="容器"><div class="row"><div class="col-xs-4"><div class="table-responsive"><table summary="这张表格展示了如何使用 Bootstrap 的默认功能创建响应式表格" class="table table-bordered table-hover"><头><tr><th>信息</th><th>HomeTeam vs AwayTeam</th><th>Line</th></tr></thead><tr><td>姓名</td><div class="容器"><div class="row"><ng-container *ngFor="let n of allhomeTeamName"><tr><td>{{n}}</td></tr></ng-容器></tbody><tr><div class="容器"><div class="row"><ng-container *ngFor="let n of allawayTeamName"><tr><td>{{n}}</td></tr></ng-容器></tbody><div class="容器"><div class="row"><ng-container *ngFor="let n of allline"><tr><td>{{n}}</td></tr></ng-容器></tbody>
api.component.ts 代码
import {Component} from '@angular/core';从@angular/common/http"导入 {HttpClient}从 'rxjs' 导入 {forkJoin};从 'rxjs/operators' 导入 {map};@成分({选择器:'app-mlb-api',templateUrl: './mlb-api.component.html',styleUrls: ['./mlb-api.component.css']})导出类 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;全线;构造函数(私有 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);控制台日志(全线);this.allEventId = results[1].map(r => r.EventId);控制台日志(结果[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 也会有 'undefined'//如果你愿意,那么你可以过滤this.allline = this.allline.filter(l => !!l);console.log(this.allline);});}
查看 stackblitz - https://stackblitz.com/edit/angular-8npc19?file=app%2Fbutton-overview-example.ts
Using ForkJoin I am trying to access data from 2 API
https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json
https://www.fantasylabs.com/api/sportevents/3/2019_06_17
I am using forkjoin to access data of both data asynchronously. I am able to access homeTeamName, awayTeamName successfully, but while access lines i am getting error
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>
api.component.ts code
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);
});
}
}
How can I resolve this error?
解决方案
You can have your code like this -
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);
});
}
See the stackblitz - https://stackblitz.com/edit/angular-8npc19?file=app%2Fbutton-overview-example.ts
这篇关于使用 ForkJoin 同时访问来自 2 个 API 的数据:未定义错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!