我在其函数中写下了put和删除方法(分别为" editform"one_answers" deleteform")。
我想在成功完成每个请求后显示setAlert()
功能。因此,我使用了.then()
方法,并且它在editForm
功能中正常工作,如下所示。
但是当我为 deleteForm
做同样的事情时, .then()
方法不起作用,因为它说:"然后'然后在类型'订阅'上不存在'。那么我该如何解决?
这是我的component.ts文件:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormService } from './forms.service';
import { HttpClient } from '@angular/common/http';
import { alert } from './alert';
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {
alert: alert;
id: any;
posts: any;
constructor(public formService: FormService ,private route: ActivatedRoute,
private router: Router, private http: HttpClient) { }
ngOnInit() {
this.id=this.route.snapshot.params['id'];
this.alert = new alert();
this.posts = this.formService.getForms(this.id).subscribe(
(forms: any) => {
this.formService.form = forms[0];
}
);
}
editPost() {
this.formService.editForm().then((res:any) => {
this.formService.alert.setAlert("Post has been successfully saved !");
})
}
deletePost() {
this.formService.deleteForm().subscribe(
data => {
console.log("DELETE Request is successful ", data);
},
error => {
console.log("Error", error);
}
).then(() => {
this.formService.alert.setAlert("Post has been successfully deleted !");
})
}
}
这是我的service.ts文件:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { form } from './form-interface';
import { alert } from './alert';
@Injectable({
providedIn: 'root'
})
export class FormService {
formsUrl = "https://jsonplaceholder.typicode.com/posts";
form: form = {
id: 0,
userId: 0,
title: '',
body: ''
};
alert: alert;
constructor(private http: HttpClient) {
this.alert = new alert();
}
getForms(id) {
return this.http.get('https://jsonplaceholder.typicode.com/posts'
+ "?id=" + id)
}
editForm() {
return fetch(this.formsUrl + "/" + this.form.id, {
method: 'PUT',
body: JSON.stringify(this.form),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
}
deleteForm() {
return this.http.delete(this.formsUrl + "/" + this.form.id);
}
}
editform
方法使用JavaScript fetch
API调用服务,该服务返回了Promise SO then
方法在此处工作。在deleteForm
方法中,您是使用Angular HttpClient
进行的服务调用,该呼叫可返回可观察的。而不是使用then
,您应该使用subscribe
方法
deleteForm() {
return this.http.delete(this.formsUrl + "/" + this.form.id);
}
在您的component.ts
中 deletePost() {
this.formService.deleteForm().subscribe(
data => {
console.log("DELETE Request is successful ", data);
this.formService.alert.setAlert("Post has been successfully deleted !");
},
error => {
console.log("Error", error);
}
)
}
,因为http返回可观察到的不承诺。在此处使用.subscribe。它将解决您的问题
当您在订阅方法中获取响应并将警报调用时,您可以使用消息如下
deletePost() {
this.formService.deleteForm().subscribe(
data => {
console.log("DELETE Request is successful ", data);
this.formService.alert.setAlert("Post has been successfully deleted !");
},
error => {
console.log("Error", error);
}
))
}