Question

当我使用post mehtod时没有错误，但是post方法不起作用this.http.post。（它在昨天工作，但今天不起作用。不知道）有我的服务：

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);
  }
}

这是我的组件：

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);
  }
}

组件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>

模块：

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

Answer 1

HttpClient方法，例如get，post，put或delete会返回Observable。因为Observables本质上是懒惰的，所以只有在我们调用subscribe时才会发出请求。他们称之为冷可观察者。

因此，为了发出请求，您需要subscribe到您的观察点：

<强> api.service.ts

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

或者您可以从api服务返回observable并在AddPostComponent订阅。

另一种方法是将observable转换为Promise

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

在Angular 5上发布方法。没有错误，但它不起作用

1 个答案: