[英]Angular 2 Frontend with Active Record Association in Rails 5 API
Please help I have an API App in Rails and its huge part is dependent on Active Record Association, I want to understand how to consume relationship between active record models rendered by Rails API on my Angular 2 Frontend Application. 请帮助我在Rails中有一个API App,它的很大一部分取决于Active Record Association,我想了解如何在Angular 2前端应用程序中使用Rails API渲染的Active Record模型之间的关系。 For example:
例如:
I have a project.ts file with 我有一个project.ts文件
export class Project {
constructor( public id?: number,
public title?: string,
public category_id?: number
) {}
}
And a category.ts file with 和一个category.ts文件
export class Category {
constructor(
public id?: number,
public name?: string
) {}
}
also a category.rb model file with 还有一个category.rb模型文件
class Category < ApplicationRecord
has_many :projects
end
and a project.rb model file 和一个project.rb模型文件
class Project < ApplicationRecord
belongs_to :category
end
I have been able to implement the communication with the API from the Angular front end. 我已经能够从Angular前端实现与API的通信。 In a rails view (an erb or haml) file if I want to get the category of a Project, I would do @project.category
在Rails视图(erb或haml)文件中,如果我想获取项目的类别,我将执行@ project.category
With the code structure I have above how can I get the Category name instance of a Project using the category_id that i have in the project.ts file? 通过上面的代码结构,如何使用project.ts文件中的category_id获取项目的类别名称实例? How can I have access to the name and all other attribute of the Category, using category_id in the project.ts?
如何使用project.ts中的category_id访问类别的名称和所有其他属性? since the JSON object rendered will only have the category_id, this example below did not work for me...
由于呈现的JSON对象仅具有category_id,因此以下示例对我不起作用...
*ngFor = "let project of projects"
project.category_id.name
any ideas on how to fix this? 有想法该怎么解决这个吗?
I was able to get the category name attribute into the JSON object using ActiveModelSerializer, my object now looks like this. 我可以使用ActiveModelSerializer将类别名称属性添加到JSON对象中,我的对象现在看起来像这样。
[
{
"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"
},
]
When I try to access {{ project.category }} from the front end i get [object Object] {{ project.category_id }} returns a valid ID, any idea how I can access name attribute? 当我尝试从前端访问{{project.category}}时,我得到了[object Object] {{project.category_id}}返回有效的ID,我知道如何访问名称属性吗? when i tried {{ project.category.name }} it didn't work.
当我尝试{{project.category.name}}时,它不起作用。
I was able to get this to working after validating that I got a JSON object on the front end. 在验证前端有JSON对象后,我能够使它工作。 This is what my category.ts file now looks like.
这就是我的category.ts文件的外观。 I hope this helps someone else.
我希望这可以帮助其他人。 Angular Pipes are very useful check here to read more about it.
角管是非常有用的检查, 在这里阅读更多有关它的信息。
export class Category {
constructor(
public id?: number,
public name?: string
) {}
}
let category: Category = JSON.parse('{"id": id, "name": name}');
Had to also validate that category name is available for all projects in the front end also with 还要验证类别名称是否可用于前端的所有项目
<small *ngIf="project.category">Category: {{ project.category.name }}</small>
If you are wondering what my ProjectsController index looks like, here it is. 如果您想知道我的ProjectsController索引是什么样子,就在这里。 Also don't forget to create a category_serializer and project_serializer check ActiveModelSerializer documentation on how to do that.
另外,不要忘记创建category_serializer和project_serializer,请查看ActiveModelSerializer文档,以了解有关操作方法。
def index
@projects = Project.order('created_at DESC')
render json: @projects, include: 'category.name'
end
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.