为什么HTTP删除请求不会删除该项目

Question

下拉服务调用http delete service，它从Firebase服务器中的数据获取id。然后将该id设置为http服务中的属性idArr。那么id用于删除数据库条目。但它不起作用。

我期待在数据库中的{data.id [0]}字段被删除，但它不是被删除

没有错误被抛出

//下拉服务

import { Injectable } from '@angular/core'; 
import { ICourseModel } from '../interface/course-model'; 
import { HttpPostService } from './http-post.service'; 
import { HttpGetService } from './http-get.service'; 
import { HttpDeleteService } from './http-delete.service'; 


@Injectable() 
export class DropDownService { 
    courses: ICourseModel[] = [ 
    { course: 'Mobile Development' }, 
    { course: 'Web Development' }, 
    { course: 'IOS Development' }, 
    { course: 'Android Development' } 
    ]; 
    id: string[]; 
    coursesDt: any = this.httpGet.getData(); 


    private setDt() { 
    this.httpSer.storeData(this.courses).subscribe(
     (response) => { console.log(response); }, 
     (error) => { console.log(error); }); 
    } 

    private getDt() { 
    this.httpGet.getData().subscribe(
     (response) => { this.coursesDt = response; }, 
     (error) => { console.log(error); }); 
    } 

    getData() { 
    return this.courses; 
    } 

    setData(obj: { course: string }) { 
    this.courses.unshift(obj); 
    } 
    constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) { 
    this.setDt(); 
    // this.getDt(); 
    console.log(this.coursesDt); 
    this.dlt.gtData().then(id => { this.dlt.idArr.push(...id); }); 
    this.dlt.removeDt().then(() => console.log('ran')); 
    } 
} 

//删除HTTP服务

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class HttpDeleteService { 
    idArr = []; 
    public baseUrl = ''; 

    constructor(private http: Http) { 
    console.log(this.idArr); 
    } 

    gtData() { 
    return this.http.get(`${this.baseUrl}/data.json`) 
     .toPromise() 
     .then(response => this.convert(response.json())); 
    } 

    convert(pasrsedResponse) { 
    return Object.keys(pasrsedResponse).map(
     id => (id) 
    ); 
    } 

    removeDt() { 
    return this.http.delete(`${this.idArr[0]}.json`).toPromise(); 
    } 
} 

//应用程序组件

ngOnInit() { 
    // form controls validation specicified in the class for the Reactive Forms 
    this.courseForm = this.fb.group({ 
     username: [null, [Validators.required, Validators.pattern(/^[a-z0-9_-]{3,16}$/)]], 
     email: [null, [Validators.required, Validators.pattern('([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\\.([a-zA-Z]{2,5})')]], 
     address: [null, [Validators.required, Validators.minLength(10), Validators.maxLength(100)]], 
     date: [null, [Validators.required]], 
     select: [null, [Validators.required]] 
    }); 
    // passing the observable to the variable which then uses async pipe 
    this.route.data.subscribe((data: Data) => { this.coursesDp = data['course']; }); 


    this.personDetail = this.fieldData.getPersonData(); 
    } 

} 

Answer 1

代码的问题在于它是异步的。归结为：

constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) { 
    this.httpSer.storeData(this.courses); 
    this.dlt.http.get('... url1 ...'); 
    this.dlt.http.delete('... url2 ...'); 
} 

所有这些请求将并行执行，并且没有办法确定它们将被执行的顺序。所以，当delete（）运行时idArr仍然是空的。您需要调用链，以广阔的前景等待前面的调用已完成，然后再开始下一次调用，这样的事情（代码没有测试，只是想法）：

constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) { 
    this.setDt().then(() => { 
     this.dlt.gtData().then(id => { this.dlt.idArr.push(...id); }).then(() => { 
      this.dlt.removeDt().then(() => console.log('ran')); 
     }) 
    }); 
} 

Answer 2

试试这个。它的外观在您的服务中存在一个问题，它不会返回承诺或可观察的结果。

import { Injectable } from '@angular/core'; 
import { ICourseModel } from '../interface/course-model'; 
import { HttpPostService } from './http-post.service'; 
import { HttpGetService } from './http-get.service'; 
import { HttpDeleteService } from './http-delete.service'; 


@Injectable() 
export class DropDownService { 
    courses: ICourseModel[] = [ 
    { course: 'Mobile Development' }, 
    { course: 'Web Development' }, 
    { course: 'IOS Development' }, 
    { course: 'Android Development' } 
    ]; 
    id: string[]; 
    coursesDt: any = this.httpGet.getData(); 

    constructor(private httpSer: HttpPostService, private httpGet: HttpGetService, private dlt: HttpDeleteService) { 
    // Then or subscribe cannot be attached here 
    // Since this function doesn't return any promise or observable 
    //this.setDt(); 

    // So take a look here we are calling another service in subscribe block. 
    // I'm sorry I have to write this promise chain which looks ugly and mess. 
    // Since your services are already in this way so I have to do it for simplicity 
    // and to be on the point. 
    this.httpSer.storeData(this.courses) 
     .map(resp => resp.json()) 
     .subscribe(resp => { 
     this.httpGet.getData() 
      .map(resp => resp.json()) 
      .subscribe(response => { 
      this.coursesDt = response; 
      this.dlt.removeDt().then(() => console.log('ran')); 
      }); 
     }); 
    } 
}