[英]How to get data from json in rails 6 into Angular?
I'm a new in js/angular, I want to write some "trello-like" app using rails 6 and Angular 10. I'm already have controllers, db and seeds in rails app.我是 js/angular 的新手,我想使用 rails 6 和 Angular 10 编写一些“类似 trello”的应用程序。我已经在 rails 应用程序中有控制器、数据库和种子。 My app contains 3 tables.
我的应用程序包含 3 个表。 In these 3 projects I should be able to add tasks with these properties:
text
- task's name;在这 3 个项目中,我应该能够添加具有以下属性的任务:
text
- 任务名称; isCompleted
- bollean parameter, which shows the completion of the task by checkbox. isCompleted
- 布尔参数,通过复选框显示任务的完成情况。
My db scheme:我的数据库方案:
t.string "title"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end
create_table "todos", force: :cascade do |t|
t.string "text"
t.boolean "isCompleted"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
t.integer "project_id"
end
projects_contoller:项目控制器:
class ProjectsController < ApplicationController
def index
@projects = Project.all
render json: @projects, include: :todos
end
def show
@projects = Project.find(params[:id])
render json: @project, include: :todos
end
def create
@project = Project.new(title: params[:title])
if @project.save
render json: @project, status: :created
else
render json: @project.errors, status: :unprocessable_entity
end
end
end
todos_controller: (tasks controller) todos_controller:(任务控制器)
class TodosController < ApplicationController
def index
@todos = Todo.all
render json: @todos
end
def show
@todo = Todo.find(params[:id])
render json: @todo
end
def create
@todo = Todo.new(text: params[:text], isCompleted: params[:isCompleted], project_id: params[:project_id])
if @todo.save
render json: @todo, status: :created
@project = Project.find(@todo.project_id)
else
render json: @todo.errors, status: unprocessable_entity
end
end
def update
@todo = Todo.find(params[:id])
if(params.has_key?(:isCompleted))
@todo.update(isCompleted: params[:isCompleted])
end
end
end
And example of json seed file: json 种子文件的示例:
#Project data
project = Project.create([{
"title": "Family"
}])
project2 = Project.create([{
"title": "Work"
}])
project3 = Project.create([{
"title": "Other"
}])
#OtherData
todos = Todo.create!([
{
"text": "Buy a milk",
"isCompleted": false,
"project_id": 1
},
{
"text": "Send the letter",
"isCompleted": false,
"project_id": 1
},
{
"text": "Pay rent",
"isCompleted": false,
"project_id": 1
},
{
"text": "Take the shoes",
"isCompleted": false,
"project_id": 1
},
{
"text": "Call the client",
"isCompleted": true,
"project_id": 2
},
{
"text": "Send documents",
"isCompleted": true,
"project_id": 2
},
{
"text": "Do smth",
"isCompleted": false,
"project_id": 2
},
{
"text": "Call friend",
"isCompleted": false,
"project_id": 3
},
{
"text": "Go to the trip",
"isCompleted": false,
"project_id": 3
},
])
I think I should use ngFor
cycle for showing data, and I'm try it by wrote this in my app.component.ts
:我想我应该使用
ngFor
循环来显示数据,我正在尝试在我的app.component.ts
中写下这个:
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'TodoList from Procy';
projects;
todos;
constructor(private http: Http) {
http.get('http://localhost:3000/projects.json')
.subscribe(res => this.projects = res.json());
}
}
And then writing this in app.component.html
:然后在
app.component.html
中写这个:
<h1>
{{title}}
</h1>
<ul>
<li *ngFor="let project of projects">{{ project.title }}</li>
<li *ngFor="let todo of todos">{{ todo.text }}</li>
</ul>
This show me all data.这向我展示了所有数据。 How can I separate them by projects?
如何按项目将它们分开?
You are using the old HTTP Client.您正在使用旧的 HTTP 客户端。 The new one is called 'httpClient' and is imported from '@angular/common/http'.
新的称为“httpClient”,从“@angular/common/http”导入。 You do not need to call the.json() function on the result.
您不需要对结果调用 the.json() function。 So update your app component like this:
因此,像这样更新您的应用程序组件:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'TodoList from Procy';
projects;
todos;
constructor(private http: httpClient) {
http.get('http://localhost:3000/projects.json')
.subscribe(res => this.projects = res);
}
}
I am answering based on the Angular code, so you will also need to make sure that your server is returning a valid JSON object.我根据 Angular 代码回答,因此您还需要确保您的服务器返回有效的 JSON object。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.