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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (159)

我有一个简单的角度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": [
    {
      "likes": 121,
      "following": 723,
      "followers": 4433
    }
  ],
}

这是stackblitz的链接:源代码

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

我想当用户点击按钮时,喜欢应该保存到json服务器并显示在首页。现在只是显示,因为我不知道如何将生成的那些喜欢保存到json

有人可以帮忙吗?

提问于
用户回答回答于

您无法使用模拟服务器执行此操作,您需要真正的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 (...

`

扫码关注云+社区

领取腾讯云代金券