AngularJS with TypeScript $resource error: "Response does not match configured parameter"

Question

我有一个 AngularJS + TypeScript 应用程序，但我不断收到以下错误：

Error: $resource:badcfg Response does not match configured parameter

Error in resource configuration for action: Expected response to contain an get but got an object (Request: array GET)

我的AngularJS版本是1.4.8，TypeScript版本是3.0.1。我的 tsconfig.json 看起来像这样：

{
  "compileOnSave": true,
  "compilerOptions": {
  "allowJs": true,
  "lib": [ "dom", "es5", "scripthost" ],
  "noImplicitAny": true,
  "noEmitOnError": true,
  "removeComments": false,
  "sourceMap": true,
  "target": "es5"
},
"include": [
  "App/TypeScriptCode/**/*.ts",
  "typings"
],
"exclude": [
  "node_modules",
  "definitions",
  "wwwroot",
  "App/Old",
  "Scripts",
  "*.js"
]
}

这是我的 package.json

{
  "dependencies": {
  "@types/angular": "^1.6.49",
  "@types/angular-resource": "^1.5.14",
  "@types/uuid": "^3.4.3",
  "npm": "^6.3.0",
  "ts-node": "^7.0.0"
},
"devDependencies": {
  "angular": "1.5.0",
  "bootstrap": "3.3.6",
  "grunt": "0.4.5",
  "grunt-bower-task": "0.4.0",
  "typescript": "^3.0.1",
  "typings": "1.3.0"
},
"name": "my-app",
"private": true,
"scripts": {
"demo": "./node_modules/.bin/ts-node ./test.ts"
},
"version": "1.0.0"
}

错误发生在以下控制器中的 GetEmployeeTypes 函数中：

namespace App {
'use strict';

class EmployeeTypeController {
    noRecords: boolean;
    employeeTypeApi: IEmployeeTypeApi;
    storage: ngStorage.IStorageService;

    ///
    public constructor($localStorage: ngStorage.IStorageService, employeeTypeApi: IEmployeeTypeApi) {
        this.noRecords = true;
        this.employeeTypeApi = employeeTypeApi;
        this.storage = $localStorage;

        this.GetEmployeeTypes();
    }

    ///
    public GetEmployeeTypes(): void {

        const employeeTypes: IEmployeeType[] = this.employeeTypeApi.employeeType.get(function success(): void {
            this.storage.employeeTypes = employeeTypes;
        });
    };
}

angular
    .module('App')
    .controller('EmployeeTypeController', EmployeeTypeController);
}

用于从后端加载员工类型的 api 服务 EmployeeTypeApi 如下所示：

namespace App {
'use strict';

export interface IEmployeeTypeApi {
    employeeType: IEmployeeTypeClass;
}

export class EmployeeTypeApi implements IEmployeeTypeApi {

    constructor(public $resource: angular.resource.IResourceService) {}

    publishDescriptor: angular.resource.IActionDescriptor = {
        method: 'GET',
        isArray: true
    };

    public employeeType: IEmployeeTypeClass = this.$resource<IEmployeeType[], IEmployeeTypeClass>('https://localhost:44300/api/employeetypes', null, {
        publish: this.publishDescriptor
    });
}

// Now register the service with the Angular app
angular
    .module('App')
    .service('employeeTypeApi', EmployeeTypeApi);
}

最后，这里是 IEmployeeType 和 IEmployeeTypeClass：

namespace App {

export interface IEmployeeType extends angular.resource.IResource<IEmployeeType> {
    id: number;
    clientId: number;
    employeeTypeName: string;
    description: string;

    $publish(): IEmployeeType;
    $unpublish(): IEmployeeType;
}
}


namespace App {

export interface IEmployeeTypeClass extends angular.resource.IResourceClass<IEmployeeType[]> {
    get(): IEmployeeType[] ;
    get(onSuccess: Function): IEmployeeType[];

    publish(): IEmployeeType[];
}
}

所以我在这里想要实现的是从后端加载一个 IEmployeeType 对象数组。后端本身是一个 ASP.NET Web API 2 服务，由许多控制器组成。我已经验证了用于加载 Employee Type 数据的控制器被正确调用并且它确实 return 一个 EmployeeType 实例数组，这意味着问题很可能出在前端代码中。

正如您在 EmployeeTypeApi 中看到的那样，我已经明确地将 isArray 标志设置为 "true"，所以我不确定为什么会出现错误。我在这里做错了什么？

Answer 1

不确定您要在这里实现什么。您正在将 get() 分配给 employeeTypes，同时还调用了 get 成功。你又赋值了。

    public GetEmployeeTypes(): void {

    const employeeTypes: IEmployeeType[] = this.employeeTypeApi.employeeType.get(function success(): void {
        this.storage.employeeTypes = employeeTypes;
    });

也许试试

  let employeeTypes

然后调用get然后赋值。尽管您的设置看起来非常具体，所以我无法说明问题所在。如果它不尝试使用 Chrome Dev Tools

进行调试

然后你可以在应该赋值的地方设置一个断点，并检查所有变量的状态。希望对你有帮助

Answer 2

问题如下，在 EmployeeTypeApi 中，我定义了 "publish" 方法的行为方式，即：

publishDescriptor: angular.resource.IActionDescriptor = {
        method: 'GET',
        isArray: true
    };

但是，在我的 EmployeeTypeController 中，我改为调用 "get" 方法：

const employeeTypes: IEmployeeType[] = this.employeeTypeApi.employeeType.get(function success(): void {
        this.storage.employeeTypes = employeeTypes;
    });

由于没有定义 "get" 应该如何表现，即使用什么请求方法和期望什么数据类型，它默认期望一个对象和因此它产生了我在原始 post.

中概述的错误

一旦我在控制器中将 "get" 替换为 "publish" ，错误就消失了。当然，更好的解决方案是将 "get" 的 "isArray" 标志设置为 true，但不管怎样，现在问题已经解决了。

AngularJS with TypeScript $resource error: "Response does not match configured parameter"

AngularJS with TypeScript $resource error: "Response does not match configured parameter"

asp.net-web-api

angularjs

typescript

angular-resource