动态 REST API 调用

我已经成功访问​​页面上的静态API数据。我现在正在尝试访问 dynam API。我已经阅读了一些访问动态API的文档，但是API提供商的文档与在线资源不同。我不确定必须在现有代码中进行哪些更改才能访问动态 API 数据。这是来自 API 提供商的链接 -https://drive.google.com/file/d/0B2HH3TWuI4Fdc3RfNGVocy1pT0tuSXlLdHlPMUZSRG5GTWJV/view https://drive.google.com/file/d/0B2HH3TWuI4Fdc3RfNGVocy1pT0tuSXlLdHlPMUZSRG5GTWJV/view。我也很困惑contracts and getter, setter文档中提到。我应该如何以及在哪里使用它们？

这是我的访问代码Name, Line and MoneyLine来自静态 json API 的数据 -https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json

我如何利用文档并访问实时 API 数据？

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  {
//allhomeTeamName;
//allawayTeamName;
allline;
allOdds;
allName;
all: Array<{line: string, name: string,oddsAmerican:string}> = [];
firstLinePerGame: Array<string>;
oddsAmericans: Array<string>;

  constructor(private http: HttpClient) {}

  ngOnInit() {

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

    this.firstLinePerGame = new Array<string>();
    //this.oddsAmericans = new Array<string>();

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

      //this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      //this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      this.allName = draftkingsResp.map(r => r.name);
      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
      this.allline = this.allline.filter(l => !!l);
      this.allOdds = draftkingsResp.map(r => r.offers).flat().map(r=>r.outcomes[0]).flat().map(o=>o.oddsAmerican);
      this.createAllArray();      


    });
  }

  createAllArray(): void {
    for (let i = 0; i < this.allline.length; i++) {
      let item = {
        line: this.allline[i],
        //awayTeam: this.allawayTeamName[i],
        //homeTeam: this.allhomeTeamName[i],
        name:this.allName[i],
        oddsAmerican: this.allOdds[i]
      }
      this.all.push(item);
    }
  }
}

api.component.html代码

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

        <!--   <th class="awayTeamName">awayTeamName&nbsp;<a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
          <th class="field3">homeTeam&nbsp;<a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>
 -->           <th class="field3">Name&nbsp;<a ng-click="sort_by('Name')"><i class="icon-sort"></i></a></th>
            <th class="line">Line&nbsp;<a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
             <th class="field3">Money Line&nbsp;<a ng-click="sort_by('oddsAmericans')"><i class="icon-sort"></i></a></th>
      </tr>
  </thead>

  <tbody>
    <ng-container *ngFor="let item of all| paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
      <tr>
        <td>{{item.name }}</td>
<!--         <td>{{item.awayTeam}}</td>
        <td>{{item.homeTeam}} </td> -->
                <td>{{item.line }}</td>

        <td>{{item.oddsAmerican}}</td>

      </tr>
    </ng-container>
  </tbody>
</table> 


<pagination-controls (pageChange)="p = $event"></pagination-controls>

我已经根据您的要求更新了代码。我已经利用可观察量在链接中获取实时数据https://stackblitz.com/edit/stackoverflow-24-06-2019-ewzpst?file=src/app/app.component.html https://stackblitz.com/edit/stackoverflow-24-06-2019-ewzpst?file=src/app/app.component.html