在Angular 5上发布方法.没有错误，但没有用 [英] Post method on Angular 5. No error but it doesn't work
本文介绍了在Angular 5上发布方法.没有错误，但没有用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我使用post mehtod时，没有错误，但是post方法不起作用 this.http.post .(昨天起作用，但是今天不起作用.不知道)是我的服务
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);
}
}
这是我的组件:
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 { }
推荐答案
HttpClient 方法，例如 get ， post ， put 或 delete 返回 Observable .由于 Observables 本质上是惰性的，因此仅当我们调用订阅时才发出请求.它们被称为冷可观察物.
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();
或者您可以从api服务返回observable并在 AddPostComponent 中进行订阅.
Or you can return observable from api service and subscribe in AddPostComponent.
另一种方法是将可观察的值转换为Promise
Another way is just convert observable to Promise
this.http.post(url, httpParams).toPromise()
这篇关于在Angular 5上发布方法.没有错误，但没有用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
