我在获取RouteParam页面上的Api时遇到麻烦,我希望该页面使用给定驱动程序的信息打开一个新的API,但是当我打开路由时,错误提示“ ”未定义。我想知道如何修复我的代码,以便使用2个不同的API显示此类信息。
我尝试使用谷歌搜索大量答案并更改ID,但是似乎没有任何效果,我认为这与ID错误或2个函数异步工作有关,但是我无法查明确切的问题。该服务可与我的其他两个API一起使用,但不能与该API一起使用。
路由
module app {
const app = angular.module("app",['ngRoute']);
app.config(routeConfig);
require('./controllers/service');
require('./controllers/drivers');
require('./controllers/teams');
require('./controllers/driver')
require('route-params')
// require('angular-route');
routeConfig.$inject = ["$routeProvider"];
function routeConfig($routeProvider) {
$routeProvider
.when('/drivers', {
templateUrl: './src/pages/drivers.html',
controller: 'DriversListCtrl',
controllerAs: 'vm'
})
.when('/drivers/:driverId', {
templateUrl: './src/pages/driverDetails.html',
controller: 'DriverDetailsCtrl',
controllerAs: 'vm'
})
.when('/teams', {
templateUrl: './src/pages/teams.html',
controller: 'TeamListCtrl',
controllerAs:'vm'
})
.otherwise({
redirectTo:'/drivers'
})
}
}
服务
module app.service {
export interface IDataAccessService {
getDriversApi():ng.IPromise<IDriver>;
getDriverDetailsApi(id:number):ng.IPromise<IDriverDetails>
getDriverRacesApi(id:number):ng.IPromise<IDriverRaces>
}
export class DataAccessService implements IDataAccessService {
static $inject = ['$http'];
constructor(private $http: ng.IHttpService,public id:any) {
}
getDriversApi():ng.IPromise<IDriver>{
return this.$http.get('https://ergast.com/api/f1/2013/driverStandings.json')
.then((response:ng.IHttpPromiseCallbackArg<IDriver>):IDriver=>{
return response.data;
})
}
getDriverDetailsApi(id:any):ng.IPromise<IDriverDetails>{
return this.$http.get('http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK')
.then((response:ng.IHttpPromiseCallbackArg<IDriverDetails>):IDriverDetails=>{
return response.data;
})
}
getDriverRacesApi(id:any):ng.IPromise<IDriverRaces>{
return this.$http.get('http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK')
.then((response:ng.IHttpPromiseCallbackArg<IDriverRaces>):IDriverRaces=>{
return response.data;
控制器
export class DriverDetailsCtrl implements IDriverDetails {
static $inject = ["dataAccessService", "$routeParams"];
constructor(
private dataAccessService: app.service.DataAccessService,
public driverDet,
public nameFilter,
public driverId,
public races,
public $routeParams //
) {
this.driverId = $routeParams.id;
this.dataAccessService.getDriverDetailsApi(this.driverId)
.then((data: any): void => {
this.driverDet = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
console.log(driverDet)
return this.driverDet;
});
this.dataAccessService.getDriverRacesApi(this.driverId)
.then((data: any): void => {
this.races = data.MRData.RaceTable.Races;
console.log(races)
return this.races;
});
}