![](/img/trans.png)
[英]How can i solve a "Property 'style' does not exist on type 'Element' error?
[英]How can I solve - Property 'then' does not exist on type 'Subscription'
我在它们的函数中编写了 PUT 和 DELETE 方法(分别是“editForm”和“deleteForm”)。
我想在每个请求成功完成后显示setAlert()
函数。 因此,我使用了.then()
方法,它在editForm
函数中完美运行,如下所示。
但是当我对deleteForm
做同样的deleteForm
, deleteForm
.then()
方法不起作用,因为它说:“属性 'then' 在类型 'Subscription' 上不存在”。 那么我该如何解决这个问题呢?
这是我的 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);
}
}
因为 http 返回 observable 而不是 promise。 在此处使用 .subscribe。它将解决您的问题
editform
方法使用 JavaScript fetch
api 调用服务,该服务返回承诺, then
方法在那里工作。 在deleteForm
方法中,您正在使用返回 observable 的deleteForm
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);
}
)
}
当您在订阅方法中获得响应并调用警报时,您可以在获得正确响应时使用消息,如下所示
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);
}
))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.