Angular 2 Frontend с Active Record Association в Rails 5 API

Question

Пожалуйста, помогите мне иметь приложение API в Rails, а его огромная часть зависит от Active Record Association, я хочу понять, как использовать отношения между активными моделями записей, создаваемыми Rails API на моем приложении Angular 2 Frontend. Например:

У меня есть project.ts файл с

export class Project { 
    constructor(public id?: number, 
    public title?: string, 
    public category_id?: number 
) {} 
} 

И в category.ts файл с

export class Category { 
    constructor(
    public id?: number, 
    public name?: string 
) {} 
} 

также category.rb модель файла с

class Category < ApplicationRecord 
    has_many :projects 
end 

и project.rb файл модели

class Project < ApplicationRecord 
    belongs_to :category 
end 

Я был в состоянии осуществить обмен данными с API от углового переднего конца. В представлении рельсов (файл erb или haml), если я хочу получить категорию проекта, я бы сделал @ project.category

Со структурой кода, которую я выше, как получить экземпляр категории Проект, используя category_id, который у меня есть в файле project.ts? Как я могу получить доступ к имени и всем другим атрибутам категории, используя category_id в project.ts? так как объект JSON оказанного будет иметь только CATEGORY_ID, этот пример ниже не работает для меня ...

*ngFor = "let project of projects" 
project.category_id.name 

каких-либо идей о том, как это исправить?

Мне удалось получить атрибут имени категории в объекте JSON с помощью ActiveModelSerializer, теперь мой объект выглядит так.

[ 
    { 
    "category": { 
     "id": 1, 
     "name": "Mobile Development" 
    }, 
    "category_id": 1, 
    "description": "Contrary to popular belief, Lorem Ipsum is not simply random text. \n  It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.", 
    "id": 22, 
    "title": "Project 9 Test", 
    "updated_at": "2016-12-23T05:30:05.098Z" 
}, 
] 

При попытке доступа {{}} project.category от переднего конца я получить [объект Object] {{project.category_id}} возвращает действительное удостоверение личности, идея, как я могу получить доступ имя атрибута ? когда я пробовал {{project.category.name}}, это не сработало.

Answer 1

Я смог заставить это работать после проверки того, что у меня есть объект JSON на передней панели. Вот как выглядит мой файл category.ts. Надеюсь, это поможет кому-то другому. Угловые трубы очень полезны для проверки here, чтобы узнать больше об этом.

export class Category { 
    constructor(
    public id?: number, 
    public name?: string 
) {} 
} 

let category: Category = JSON.parse('{"id": id, "name": name}'); 

бы также подтвердить, что название категории для всех проектов в передней части также с

<small *ngIf="project.category">Category: {{ project.category.name }}</small>​ 

Если вам интересно, что мой индекс ProjectsController выглядит, вот она. Также не забудьте создать category_serializer и project_serializer проверить документацию ActiveModelSerializer о том, как это сделать.

def index 
    @projects = Project.order('created_at DESC') 
    render json: @projects, include: 'category.name' 
end