Ошибка типа: не удалось прочитать свойство 'id' из-за неопределенной ошибки $ routeparams - PullRequest
0 голосов
/ 27 марта 2019

У меня проблемы с загрузкой API на моей странице RouteParam, я хочу, чтобы на странице открывался новый API с информацией о заданных драйверах, однако, когда я открываю маршрут, ошибка говорит, что "id"не определено.Я хотел бы знать, как я мог бы исправить свой код, чтобы отображать такую ​​информацию с помощью двух разных 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;
                });
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...