很难使用Angular从API获取json数据。
很难使用Angular从API获取json数据。
提问于 2019-06-12 02:48:20
我正在尝试从https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json接口获取数据
并将它们存储在我的Angular应用程序的表中。我的页面上显示的是最初的15行，而不是所有行。并且我不能获取嵌套在object对象中的行数据。
这是我的HTML代码
<div class="row">
<mat-toolbar color="primary">
<span>Welcome!</span>
</mat-toolbar>
<div class="container">
<br>
<h2>Information</h2>
<span class="right"><a href="https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json" title="sportsbook1">API endpoint</a></span>
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>HomeTeamName</th>
<th>AwayTeamName</th>
<th>Start Date</th>
<th>Offers</th>
<th>Line</th>
<!--<th>Image</th>-->
</tr>
</thead>
<tbody>
<ng-container *ngFor="let data of data.events">
<tr>
<td>{{data.id}}</td>
<td>{{data.name }}</td>
<td>{{data.homeTeamName }}</td>
<td>{{data.awayTeamName}}</td>
<td>{{data.startDate }}</td>
<td>{{data.offers[1].label }}</td>
<td>{{data.offers.outcomes[2].line }}
<!--<td><img class="image-width" src="{{contact.image}}" alt="{{contact.name}}}"></td>-->
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>这是我的打字代码
import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';
@Component({
selector: 'app-draftking',
templateUrl: './draftking.component.html',
styleUrls: ['./draftking.component.css']
})
export class DraftkingComponent implements OnInit {
private apiUrl = 'https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json';
displayedColumns = ['id','name', 'homeTeamName','awayTeamName','offers','line'];
data: any = {};
dataSource = this.data;
constructor(private http: Http) {
this.getLeague1();
this.getData1();
}
getData1(){
return this.http.get(this.apiUrl)
.map((res: Response) => res.json())
}
getLeague1() {
this.getData1().subscribe(data => {
console.log(data);
this.data = data
})
}
ngOnInit() {
}
}回答 1
Stack Overflow用户
发布于 2019-06-12 03:38:53
通常，您在服务中设置实际的服务器调用(之所以称为model，是因为它对您的数据进行建模)。下面是我的一个例子。
service.ts
@Injectable()
export class ApiService {
constructor(private http: HttpClient) { }
public get<T>(path: string, routerParams?: Params): Observable<T> {
let queryParams: Params = {};
if (routerParams) {
queryParams = this.setParameter(routerParams);
}
return this.http.get<T>(this.path(path), { params: queryParams });
}
public put<T>(path: string, body: Object = {}): Observable<any> {
return this.http.put(this.path(path), body);
}
public post<T>(path: string, body: Object = {}): Observable<any> {
return this.http.post(this.path(path), body);
}
public delete<T>(path: string): Observable<any> {
return this.http.delete(this.path(path));
}
...在我的组件(有时是其他服务)中，我将调用一个API方法，并期望以可观察对象的形式得到结果。因此，在您的情况下，我会像这样使用我的服务：
组件
constructor(private apiService: ApiService) { }
ngOnInit() {
this.apiService('https://pathtoserver').subscribe(data => {
if (data.id) {
this.setCurrentUser();
}
});
} 嘿，记住不要多次调用getData1()；否则你会有两个“热”订阅。使用.pipe(take(1)).sub...一旦他们给了你一些东西，就会终止订阅。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56550037
复制相关文章
相似问题