0

我有一个简单的 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--;
  }
}

服务.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 的链接：源代码

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

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

有人可以帮忙吗？

4

2 回答 2

1

您可以使用

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

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

控制台日志

于 2021-02-26T15:50:33.037 回答
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 (...

`

于 2018-10-25T21:24:47.087 回答