为什么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

试试这个。它看起来在您的服务中存在一个问题，它没有返回承诺或可观察到。

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

Answer 2

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

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