Question

我有一个简单的angular 6应用，其中有“喜欢”和“不喜欢”按钮，我想将数据保存到JSON服务器（我用作模型），我没有API，

这是我到目前为止所拥有的

HTML：

<div class="container">
  <div class="row">
    <p class="col">{{numberOfLikes}}</p>
    <button class="col btn btn-success" (click)="likeButtonClick()">Like</button>
    <button class="col btn btn-danger" (click)="dislikeButtonClick()">Dislike</button>
  </div>

</div>

打字稿：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'like-box',
  templateUrl: 'like.component.html',
  styleUrls: [ './like.component.css' ]
})
export class LikeComponent  {
  numberOfLikes : number = 0;

  likeButtonClick() {
    this.numberOfLikes++;
  }

  dislikeButtonClick() {
    this.numberOfLikes--;
  }
}

services.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Status } from '../model/statuses.model';
@Injectable({
  providedIn: 'root'
})
export class UserService {
   status: Status[];
  constructor(private http: HttpClient) { }
  statusUrl = 'http://localhost:3000/statuses';

  getStatuses() {
    return this.http.get<Status[]>(this.statusUrl);
  }

  addStatus(){
  }
}

JSON：

{
  "statuses": [
    {  
       "id": 1,
      "likes": 121,
      "following": 723,
      "followers": 4433
    }
  ],
}

这是stackblitz的链接：source code

我知道如何使用formBuilder从表单中获取数据，但是我现在是栈，

我希望当用户单击“喜欢”按钮时，喜欢应保存到json服务器并显示在首页上。现在只是显示，因为我不知道如何将生成的那些赞保存到json

可以帮忙吗？

Answer 1

您无法在模拟服务器上执行此操作，需要真正的api。那你可以打电话 this.http.post(this.statusUrl, newStatusObject) 在真实服务器上创建新的状态对象。

编辑使用json-server可以做到，但是您需要更新json。只需在状态中添加一个ID字段即可：

{
  "statuses": [
   {
     "id": 1
     "likes": 121,
     "following": 723,
     "followers": 4433
    }
  ],
}

然后您以这种方式更新它：

  const newLikes = { likes: 122 };
  this.http.patch(this.statusUrl, newLikes). subscribe (...

`

Answer 2

你可以使用

Type s + enter at any time to create a snapshot of the database

如果您按下 s 然后 enter 在 json-server 运行时在控制台中输入，它将在与原始 db 文件相同的目录中为您保存一个新文件。

console log

如何将数据保存到JSON服务器

2 个答案: