Post method on Angular 5. No error but it doesn't work

问题

When i am using post mehtod there is no error , but post method doesn't work this.http.post.(It worked yesterday, but today doesn't work. No idea) There is my service:

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {GetData} from './data';
import {RequestMethod, RequestOptions} from '@angular/http';
import {Router} from '@angular/router';

@Injectable()
export class ApiService {
  private apiUrl = 'http://localhost:4567/index';
  constructor(private http: HttpClient, private router: Router) { }
  getPosts(): Observable<GetData[]> {
    return this.http.get<GetData[]>(this.apiUrl);
  }
  createPost(post) {
  const url = 'http://localhost:4567/post';
    const httpParams = new HttpParams()
      .append('name', post.name)
      .append('subject', post.subject)
      .append('mark', post.mark);
    console.log(post.name);
    console.log(post.subject);
    console.log(post.mark);
    this.http.post(url, httpParams);
  }
}

Here my component:

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {ApiService} from '../api.service';
import {ViewEncapsulation} from '@angular/compiler/src/core';
import {Observable} from 'rxjs/Observable';
import {GetData} from '../data';

@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.css']
})
export class AddPostComponent implements OnInit {
  constructor(private api: ApiService, private http: HttpClient) { }
  model = {
    name: '',
    subject: '',
    mark: ''
  };
  ngOnInit() {
  }
  onSubmit() {
    this.api.createPost(this.model);
  }
}

component HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<form (ngSubmit)="onSubmit()" #form [ngFormOptions]="{ updateOn: submit}">
  <div class="form-group">
    <label for="name">Name</label>
    <input [(ngModel)]="model.name" name="name" #name="ngModel" minlength="4" maxlength="10" required type="text" id="name" class="form-control">
    <div class="alert alert-danger" [hidden]="name.valid || name.pristine">
      Area cannot be empty!!!
    </div>
  </div>
  <div class="form-group">
    <label for="subject">Subject</label>
    <input [(ngModel)]="model.subject" name="subject" #subject="ngModel" minlength="4" maxlength="10" required type="text" id="subject" class="form-control">
    <div class="alert alert-danger" [hidden]="subject.valid || subject.pristine">
      Area cannot be empty!!!
    </div>
  </div>
  <div class="form-group">
    <label for="mark">Mark</label>
    <input [(ngModel)]="model.mark" name="mark" #mark="ngModel" minlength="4" maxlength="10" required type="number" id="mark" class="form-control">
    <div class="alert alert-danger" [hidden]="mark.valid || mark.pristine">
      Area cannot be empty!!!
    </div>
  </div>
  <button class="btn btn-success" type="submit">Submit</button>
</form>
<div *ngIf="model.name && model.subject && model.mark">
  <h3>Hello {{model.name}} from {{model.subject}} your mark is {{model.mark}}</h3>
</div>
</body>
</html>

Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {AppRoutingModule, routinComponents} from './app-routing.module';

import { AppComponent } from './app.component';
import { ListComponent } from './list/list.component';
import {ApiService} from './api.service';
import {HttpClientModule} from '@angular/common/http';
import { DescriptionComponent } from './description/description.component';
import { AddPostComponent } from './add-post/add-post.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    routinComponents,
    DescriptionComponent,
    AddPostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [ApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

No post activity

回答1:

HttpClient methods like get, post, put or delete return an Observable. Because Observables are lazy by nature the request is only made when we call subscribe. They're called cold observables.

So in order to fire request you have to subscribe to your observable:

api.service.ts

this.http.post(url, httpParams).subscribe();

Or you can return observable from api service and subscribe in AddPostComponent.

Another way is just convert observable to Promise

this.http.post(url, httpParams).toPromise()

来源：https://stackoverflow.com/questions/49205697/post-method-on-angular-5-no-error-but-it-doesnt-work

标签

angular

post