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，同时也调用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中，我定义了“发布” 方法的行为方式，即：

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” 的行为方式，即使用哪种请求方法和期望的数据类型，因此默认情况下期望对象，因此产生了我概述的错误在我的原始帖子中。

一旦我在控制器中将“获取” 替换为“发布” ，错误就消失了。当然，更好的解决方案是将“获取” 的“ isArray” 标志设置为 true ，但是无论哪种方式，问题都可以立即解决。

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

2 个答案: