我該如何解決 - “訂閱”類型上不存在“那么”屬性

Question

我在它們的函數中編寫了 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);
      }

}

Answer 1

因為 http 返回 observable 而不是 promise。 在此處使用 .subscribe。它將解決您的問題

Answer 2

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

Answer 3

當您在訂閱方法中獲得響應並調用警報時，您可以在獲得正確響應時使用消息，如下所示

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

}