Я новичок в API и Angular, и столкнулся с проблемой, которую не могу решить.
Для проекта, над которым я сейчас работаю, я настроил простой Rails API с fast_jsonapi . Это форматирует мои JSON ответы в соответствии с JSON: API . Затем у меня есть приложение Angular, которое должно принять этот ответ и отобразить его с помощью модуля Angular2-jsonapi . Для этого вопроса представьте, что у нас есть роли и обязанности. Одна роль может иметь от 0 до многих обязанностей. Ответственность принадлежит одной роли. Когда я отправляю запрос на возврат всех ролей, я получаю ответ JSON, который модулем корректно сопоставляется с моделями. Проблема возникает, когда я пытаюсь включить отношения.
В соответствии с readme я должен определить, какое отношение включить в метод .findAll, например:
{ include: 'accountabilities' }
Правильные данные запрашиваются из API rails, поскольку это тот же запрос, который я тестировал ранее с Postman. Однако ошибка, которая появляется в консоли моего браузера, выглядит следующим образом:
{message: "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();
});
}
}