带有 TypeScript $resource 错误的 AngularJS：“响应与配置的参数不匹配”

Question

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

错误：$resource:badcfg 响应与配置的参数不匹配

动作的资源配置错误：预期响应包含一个get但得到一个对象（请求：数组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 数据的控制器，并且它确实返回了一个 EmployeeType 实例数组，这意味着问题很可能出在前端代码的某个地方。

正如您在 EmployeeTypeApi 中看到的，我已明确将 isArray 标志设置为“true”，因此我不确定为什么会发生错误。我在这里做错了什么？

Answer 1

不确定您要在这里实现什么。 您将get() 分配给employeeTypes，同时还调用了获取成功。在那里你再次分配。

    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" 应该如何表现，即使用什么请求方法和期望什么数据类型，它默认期望一个对象，因此它产生了我概述的错误在我原来的帖子中。

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