'parseHasMany-找不到关系x的模型类型'-如何将嵌套的JSON映射到具有Angular2-jsonapi的模型

Question

我是API和Angular的新手，我遇到了一个似乎无法解决的问题。

对于我目前正在从事的项目，我已经使用fast_jsonapi设置了一个简单的Rails API。这会将我的JSON响应格式化为与JSON:API一致。然后，我有一个Angular应用程序，该应用程序应接收该响应并将其与Angular2-jsonapi模块映射。对于这个问题，想象一下我们有角色和责任。一个角色可以有0到许多责任。问责制属于一个角色。当我发送返回所有角色的请求时，我得到一个JSON响应，然后该响应被模块正确映射到模型。当我尝试包含关系时，就会出现此问题。

根据readme，我必须定义要在.findAll方法中包括的关系，如下所示：

{ include: 'accountabilities' }

从rails API请求了正确的数据，因为它与我之前在Postman上测试的请求相同。但是，在我的浏览器控制台中显示的错误如下：

{消息：“ parseHasMany-找不到关系责任制的模型类型。”}

我尝试了其他关系，并且现在经历了几次设置过程，但是我看不到哪里出了问题。在这种情况下，对Google，Github和Stackoverflow的搜索没有帮助。非常感谢您的帮助。

这里是相关代码。如果需要任何其他信息或代码，请告诉我，我将很乐意更新此帖子。

JSON响应示例：

{
    "data": [
        {
            "id": "1",
            "type": "role",
            "attributes": {
                "name": "Farming Engineer",
                "purpose": "Iure voluptatum rem dolores.",
                "created_at": "2020-01-16T18:38:26.151Z",
                "updated_at": "2020-01-16T18:38:26.151Z"
            },
            "relationships": {
                "accountabilities": {
                    "data": [
                        {
                            "id": "6",
                            "type": "accountability"
                        },
                        {
                            "id": "12",
                            "type": "accountability"
                        }
                    ]
                }
            }
        },
        {
            "id": "2",
            "type": "role",
            "attributes": {
                "name": "IT Supervisor",
                "purpose": "Iusto fuga fugiat qui.",
                "created_at": "2020-01-16T18:38:26.161Z",
                "updated_at": "2020-01-16T18:38:26.161Z"
            },
            "relationships": {
                "accountabilities": {
                    "data": []
                }
            }
        }
    ],
    "included": [
        {
            "id": "6",
            "type": "accountability",
            "attributes": {
                "description": "penetrate the market",
                "created_at": "2020-01-16T18:38:26.480Z",
                "updated_at": "2020-01-16T18:38:26.480Z"
            },
            "relationships": {
                "role": {
                    "data": {
                        "id": "1",
                        "type": "role"
                    }
                }
            }
        },
        {
            "id": "12",
            "type": "accountability",
            "attributes": {
                "description": "immersive experience",
                "created_at": "2020-01-16T18:38:26.507Z",
                "updated_at": "2020-01-16T18:38:26.507Z"
            },
            "relationships": {
                "role": {
                    "data": {
                        "id": "1",
                        "type": "role"
                    }
                }
            }
        }
    ]
}

role.model.ts

import {
  JsonApiModelConfig,
  JsonApiModel,
  Attribute,
  HasMany,
  BelongsTo
} from 'angular2-jsonapi';

import { Accountability } from '@app/shared/models/accountability.model';

@JsonApiModelConfig({
  type: 'roles'
})
export class Role extends JsonApiModel {
  @Attribute()
  name: string;

  @Attribute()
  purpose: string;

  @Attribute({ serializedName: 'created_at' })
  createdAt: Date;

  @Attribute({ serializedName: 'updated_at' })
  updatedAt: Date;

  @HasMany()
  accountabilities: Accountability[];
}

accountability.model.ts

import {
  JsonApiModelConfig,
  JsonApiModel,
  Attribute,
  BelongsTo
} from 'angular2-jsonapi';

import { Role } from '@app/shared/models/role.model';

@JsonApiModelConfig({
  type: 'accountabilities'
})
export class Accountability extends JsonApiModel {
  @Attribute()
  description: string;

  @Attribute({ serializedName: 'created_at' })
  createdAt: Date;

  @Attribute({ serializedName: 'updated_at' })
  updatedAt: Date;

  @BelongsTo()
  role: Role;
}

datastore.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import {
  JsonApiDatastoreConfig,
  JsonApiDatastore,
  DatastoreConfig
} from 'angular2-jsonapi';

import { Role } from '@app/shared/models/role.model';
import { Accountability } from '@app/shared/models/accountability.model';

const config: DatastoreConfig = {
  baseUrl: 'http://localhost:3000/api',
  apiVersion: 'v1',
  models: {
    roles: Role,
    accountabilities: Accountability
  }
};

@Injectable()

@JsonApiDatastoreConfig(config)
export class Datastore extends JsonApiDatastore {
  constructor(http: HttpClient) {
    super(http);
  }
}

role.component.ts

import { Component, OnInit } from '@angular/core';
import { Datastore } from '@app/datastore';
import { Role } from '@app/shared/models/role.model';
import { JsonApiQueryData } from "angular2-jsonapi";


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
  roles: Role[];

  constructor(private datastore: Datastore) { }

  ngOnInit() {
    this.datastore
      .findAll(Role, { include: 'accountabilities' })
      .subscribe((roles: JsonApiQueryData<Role>) => {
        console.log('>>>>>>>>>>>>>', roles);
        console.log('>>>>>>>>>>>>>', roles.getModels());
        this.roles = roles.getModels();
      });
    }
}

Answer 1

在this Github topic的帮助下，我终于设法解决了这个问题。最初引起此问题的原因是，我从API中获得的响应将type中的relationships和单数形式的included列出，而它们必须是复数形式。

在我的序列化器中将record_type: :accountabilities添加到has_many关系中，此更改已成功将响应映射到对象。