如何将数据发布到服务器答案

【问题标题】：How to post data to server如何将数据发布到服务器
【发布时间】：2019-03-31 02:50:38
【问题描述】：

我有一个简单的 Angular 6 应用程序，它有关注和取消关注按钮，正如你现在看到的，当你点击关注数量增加时，我想将这些关注者数量保存到 json 服务器。

这里是 json 服务器文档的链接：https://www.npmjs.com/package/json-server

这是我尝试做的演示：demo 这是我的 json 文件

  "data": [
    {
      "id": 1,
      "following": 121,
      "followers": 723,
    } 
  ],

这里是html

<div class="container">
  <div class="row">
    <p class="col">{{numberOffollowers}}</p>
    <button class="col btn btn-success" (click)="followButtonClick()">Follow</button>
    <button class="col btn btn-danger" (click)="unfollowButtonClick()">Unfollow</button>
  </div>
</div>

这里是服务

import { Injectable } from '@angular/core';
import { Statuses} from '../model/statuses';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UsersService {

  status: Statuses[];
  constructor(private http: HttpClient) { }
  statusUrl = 'http://localhost:3000/statuses';

  getStatuses() {
    return this.http.get<Statuses[]>(this.statusUrl);
  }
  addStatus(status: Statuses) {
   return this.http.patch(this.statusUrl, status);
  }
}

这是 ts 文件：

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UsersService } from './service/users.service';
import { Statuses} from './model/statuses';
@Component({
  selector: 'like-box',
  templateUrl: 'like.component.html',
  styleUrls: [ './like.component.css' ]
})
export class LikeComponent  {
 numberOffollowers : number = 69;
  status: Statuses[];

  constructor(private http: HttpClient, private usersService: UsersService) { }

  followButtonClick() {
    this.numberOffollowers++;
  }

  unfollowButtonClick() {
    this.numberOffollowers--;
  }

   addStatus() {
    this.usersService.addStatus(this.numberOffollowers)
    .subscribe(data => {
      this.status.push(this.numberOffollowers);
    });
  }
}

通过此链接app访问我的应用程序

您可以看到它不起作用，我需要在我的应用程序中进行哪些更改才能将这些关注者编号保存到 json 服务器？

【问题讨论】：

你在哪里调用 addStatus？
点击按钮上的 html 也不起作用，有什么建议吗？
在哪里？你没有调用 addStatus。

标签： javascript angular typescript angular6 json-server

【解决方案1】：

您在类似组件中添加了功能 - addStatus() 但我没有看到那个函数的调用您还需要添加状态按钮并调用该函数

【讨论】：

【解决方案2】：

单击按钮时，您没有调用 addStatus 方法，您只是在更新 numberOfFollowers

import { Component, Input } from '@angular/core';
import { UsersService } from './service/users.service';
import { Statuses} from './model/statuses';
@Component({
  selector: 'like-box',
  templateUrl: 'like.component.html',
  styleUrls: [ './like.component.css' ]
})
export class LikeComponent  {
 numberOffollowers : number = 69;
  status: Statuses[];

  constructor( private usersService: UsersService) { }

  followButtonClick() {
    this.numberOffollowers++;
    this.addStatus()
  }

  unfollowButtonClick() {
    this.numberOffollowers--;
     this.addStatus()
  }

   addStatus() {
    this.usersService.addStatus(this.numberOffollowers)
    .subscribe(data => {
      this.status.push(this.numberOffollowers);
    });
  }
}

【讨论】：