如何从rails 6中的json获取数据到Angular？

Question

我是 js/angular 的新手，我想使用 rails 6 和 Angular 10 编写一些“类似 trello”的应用程序。我已经在 rails 应用程序中有控制器、数据库和种子。 我的应用程序包含 3 个表。在这 3 个项目中，我应该能够添加具有以下属性的任务：text - 任务名称； isCompleted- bollean 参数，通过复选框显示任务的完成情况。

我的数据库方案：

    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

tod​​os_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

以及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
  },
])

我认为我应该使用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());
  }
}

然后写到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>

这显示了所有数据。如何按项目将它们分开？

Answer 1

您使用的是旧的 HTTP 客户端。新的称为“httpClient”，是从“@angular/common/http”导入的。您不需要对结果调用 .json() 函数。所以像这样更新你的应用组件：

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);
  }
}

我是根据 Angular 代码来回答的，因此您还需要确保您的服务器返回一个有效的 JSON 对象。