使用ForkJoin访问2个接口的数据有困难
使用ForkJoin访问2个接口的数据有困难
提问于 2019-06-19 04:58:41
我正在尝试访问我的angular应用程序上的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异步访问这两个数据的数据。
下面是我的api.component.ts代码
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
@Component({
selector: 'app-mlb-api',
templateUrl: './mlb-api.component.html',
styleUrls: ['./mlb-api.component.css']
})
export class MlbApiComponent {
loadedCharacter: {};
constructor(private http: HttpClient) { }
ngOnInit() {
let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json');
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 = results[0];
});
}
}我正在尝试从第一个应用程序接口实现name属性，从第二个应用程序接口实现EventID属性。
这是我的html代码。
<td>{{loadedCharacter.name}}</td>
<td>{{loadedCharacter.EventId}}</td>在我得到的输出中
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]我可以使用以下命令检索页面上的所有json数据
{{loadedCharacter | json}}为了能够单独检索所有数据，我应该进行哪些更改？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-19 05:09:17
你应该像这样修改你的代码：
将loadCharcters设置为：
loadedCharacter: {name: string, eventId: string} = <{name: string, eventId: string}>{};
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 => {
this.loadedCharacter.name = results[0][0].name;
this.loadedCharacter.EventId = results[1][0].EventId;
console.log(results[0][0].name);
});
}
<td>{{loadedCharacter.name}}</td>
<td>{{loadedCharacter.EventId}}</td>我已经更新了stackblitz。
查看stackblitz - https://stackblitz.com/edit/angular-8npc19?file=app/button-overview-example.ts中的演示
Stack Overflow用户
发布于 2019-06-19 05:09:36
results1是由对https://www.fantasylabs.com/api/sportevents/3/2019_06_17的请求返回的数组
另一方面，第一个映射的结果是一个只有一个属性"events“的对象，所以我认为您应该更多地考虑这个映射：
...
(results[0] as any).name = results[1];
this.loadedCharacter = results[0];
...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56656956
复制相关文章
相似问题