Angular HTTP Post 不会触发答案

【问题标题】：Angular HTTP Post doesn't fireAngular HTTP Post 不会触发
【发布时间】：2018-04-26 13:27:25
【问题描述】：

我看不到让这个 HTTP Post 工作。我是 Angular 4 的新手，这是我第一次尝试发帖。我可以控制台记录 URL 并验证它是正确的。我也可以在 Fiddler 中手动使用 POST 并且它可以正常工作，而不是来自应用程序。

当我在此操作期间从应用程序中观看 fiddler 时，我没有看到任何帖子尝试。

此 URL 不需要正文，因此我不确定这是否有所作为。

组件

getSanitationTasks() {
    this.sanitationProvider.getSanitationTasks().subscribe(location => this.sanitationTasks = location)
  }

  completeSanitationTask(loadnumber) {
    this.sanitationProvider.completeSanitationTask(loadnumber).subscribe((res) => {
      console.log("complete executed"); this.getSanitationTasks(), error => { console.log(error) };

    });

  }

服务

 completeSanitationTask(loadnumber) {

    console.log(this.DatabaseName, this.EmployeeNumber, loadnumber);

    this.completeSanitationTaskURL = "http://xxxx-dev.dotfoods.com/api/" + this.DatabaseName + "/v1/sanitation/tasks?employeeNumber=" + this.EmployeeNumber + "&loadNumber=" + loadnumber;

    return this.http.post(this.completeSanitationTaskURL, []).map(res => res.json());


  }

HTML

<ion-content padding>
  <ion-grid>
    <ion-row style="background: darkblue; color: white;">
      <ion-col col-md-3>
        <ion-label>Door Number</ion-label>
      </ion-col>
      <ion-col col-md-3>
        <ion-label>Load Number</ion-label>
      </ion-col>
      <ion-col col-md-3>
        <ion-label>Trailer Number</ion-label>
      </ion-col>
      <ion-col col-md-3>

      </ion-col>
    </ion-row>
    <ion-row style="border-bottom: solid; border-width: 1px" *ngFor="let task of sanitationTasks;let index = index;trackBy:trackByIndex;">
      <ion-col col-md-3>
        <ion-label>{{task.DoorNumber}}</ion-label>
      </ion-col>
      <ion-col col-md-3>
        <ion-label>{{task.LoadNumber}}</ion-label>
      </ion-col>
      <ion-col col-md-3>
        <ion-label>{{task.TrailerNumber}}</ion-label>
      </ion-col>
      <ion-col col-md-3>
        <button ion-button (click)="completeSanitationTask(task.LoadNumber)">Complete</button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

【问题讨论】：

您必须订阅它。见docs
它从 POST 返回一个 Observable。你必须订阅它才能获得 res.json() 值，但是如果它是一个 post 请求，你为什么要使用查询字符串参数。

标签： angular http http-post

【解决方案1】：

订阅返回的 observable。

completeSanitationTask(loadnumber) {
    this.sanitationProvider.completeSanitationTask(loadnumber).subscribe((res)=>{
   console.log(res); 
});

  }

【讨论】：

太棒了。我能够让它发布。如何在帖子完成后刷新屏幕以反映任务模型现在少了一项任务。
@JoeStarnes 无需刷新。如果任务是对象数组，则只需从数组中删除该对象。显示您的任务代码以及您在模板中的显示方式。
completeSanitationTask 已成功，但数据未反映在视图中。我在上面的问题中添加了 HTML。我还添加了 2 种方法……一旦完成，然后加载。

【解决方案2】：

为了发起 post http 调用，您需要订阅函数返回的Observable。

HeroesComponent 通过订阅此服务方法返回的 Observable 来启动实际的 POST 操作。

在this documentation阅读更多内容。

completeSanitationTask(loadnumber) {
  this.sanitationProvider.completeSanitationTask(loadnumber)
    .subscribe(response => {
      console.log(response);
    });
}

【讨论】：

太棒了。我能够让它发布。如何在帖子完成后刷新屏幕以反映任务模型现在少了一项任务。
可能是因为trackBy。提供 JSFiddle、Plunkr 或 Codepen 以获得进一步帮助。