I recently started working with TypeScript and I created a controller where I need to inject a service in order to use its methods. However, I am facing an issue where I am unable to access the service functions and encountering an error.
Error
TypeError: _this.marketingService.getAllActiveItems is not a function
at ExportController.getRealCustomerInfo (exportCtrl.js:20)
at $parseFunctionCall (angular-1.3.js:12475)
at callback (angular-1.3.js:21703)
at ChildScope.$eval (angular-1.3.js:14571)
at ChildScope.$apply (angular-1.3.js:14670)
at HTMLInputElement.<anonymous> (angular-1.3.js:21708)
at HTMLInputElement.dispatch (jquery.min.js:14)
at HTMLInputElement.a.handle (jquery.min.js:14)
Controller
module Marketing.GetRealExportCtrl {
import IStateParamsService = ng.ui.IStateParamsService;
import IFlashService = Flash.Services.IFlashService;
class ExportController {
listFilters: any;
fileterExport: any;
currentValue: string;
filterValueSelected: string;
listNumber: number;
reports: ICustomerInfo[];
static $inject = ['$stateParams', 'marketingService', '$scope'];
constructor(private marketingService: IMarketingService) {
this.listFilters = [
{
name: 'All',
listNumber: 1
},
{
name: 'All PCs',
listNumber: 2
},
{
name: 'All BPs',
listNumber: 3
}];
this.fileterExport = this.listFilters[0];
this.listNumber = this.listFilters[0];
}
changeFilter = (): void => {
this.listNumber = this.fileterExport.listNumber;
}
getRealCustomerInfo = () => {
this.marketingService.getRealCustomerInfo(this.listNumber)
.then((reports: ICustomerInfo[]) => {
this.reports = reports;
}, function (err) {
var e = err;
console.log(e);
});
}
}
angular
.module('Marketing')
.controller('ExportController', ExportController);
}
My Marketing Service
module Marketing.MarketingService {
import IAjaxService = Common.IAjaxService;
import AjaxServiceOptions = Common.ajaxService.AjaxServiceOptions;
import IAjaxResponse = Common.IAjaxResponse;
class MarketingService implements IMarketingService {
constructor(
private ajaxService: IAjaxService,
private $translate: ng.translate.ITranslateService,
private $q: ng.IQService) {
this.$q = $q;
}
getRealCustomerInfo = (listNumber: number): ng.IPromise<ICustomerInfo[]> => {
return this.ajaxService.makeAdminCall('marketingApi', 'getRealCustomerInfo', new AjaxServiceOptions({
cache: false,
defaultErrorMessage: 'Loading Customers failed'
})).then((result: IAjaxResponse) => {
if (result.data.isSuccessful)
return result.data.data;
});
}
}
service.$inject = ['ajaxService', '$translate', '$q'];
function service(ajaxService, $translate, $q) {
return new MarketingService(ajaxService, $translate, $q);
}
angular
.module('Marketing')
.service('marketingService', service);
}
Interface
declare module Marketing {
export interface ICustomerInfo {
CustomerID: number;
CustomerName: string;
Phone: string;
Phone2: string;
MobilePhone: string;
Email: string;
MainAddress1: string;
CustomerTypeID: number;
CustomerTypeDescription: string;
SponsorID: number;
SponsorName: string;
EnrollerID: number;
EnrollerName: string;
PriceTypeID: number;
PriceTypeDescription: string
}
export interface IMarketingService {
getRealCustomerInfo: (listNumber: number) => ng.IPromise<ICustomerInfo[]>;
}
}
It appears that the
this.marketingService.getRealCustomerInfo(this.listNumber)