Javascript 如何将Rails6中的json数据转换成Angular？

我是js/angular的新手，我想用rails 6和angular 10编写一些“类似trello”的应用程序。我已经在rails应用程序中安装了控制器、db和种子。 我的应用程序包含3个表。在这3个项目中，我应该能够添加具有以下属性的任务：

text

-任务名称；

isCompleted

-Bolean参数，它通过复选框显示任务的完成情况

我的db方案：

    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

项目控制者：

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

我想我应该使用

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>

{{title}}

{{project.title}
{{{todo.text}

---

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

您正在使用旧的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对象。

您使用的是旧的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对象。

我这样做了，但现在我得到的是空白页。控制台中出现一些错误：

error NullInjectorError:R3InjectorError（AppModule）[HttpClient->HttpClient->HttpClient]：NullInjectorError:HttpClient没有提供程序

UPD到我之前的评论：我通过将

HttpClientModule

添加到我的

app.module.ts

来修复它，这里的更多信息：我做了，但现在我得到了空白页。控制台中出现一些错误：

error NullInjectorError:R3InjectorError（AppModule）[HttpClient->HttpClient->HttpClient]：NullInjectorError:HttpClient没有提供程序

UPD到我之前的注释：我通过将

HttpClientModule

添加到我的

app.module.ts

中来修复它，更多信息如下：

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