TypeError:无法读取未定义的$ routeparams错误的属性“ id”

时间:2019-03-27 20:00:34

标签: angularjs typescript

我在获取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;
                });
        }

0 个答案:

没有答案