'parseHasMany - Тип модели для отношения x не найден' - Как мне сопоставить вложенные JSON с моделями с Angular2-jsonapi - PullRequest
Новая
       72

'parseHasMany - Тип модели для отношения x не найден' - Как мне сопоставить вложенные JSON с моделями с Angular2-jsonapi

1 голос
/ 29 января 2020

Я новичок в 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();
      });
    }
}

1 Ответ

0 голосов
/ 10 февраля 2020

С большой помощью по этому Github topi c Мне наконец удалось решить эту проблему. Первоначально причиной проблемы было то, что ответ, который я получил от моего API, перечислил type в relationships и included в единственном числе, тогда как они должны быть во множественном числе.

Добавление record_type: :accountabilities в has_many отношения в моем сериализаторе изменили это и успешно отобразили ответ на объекты.

...