Angular HTTP删除请求，应用更新问题

Question

链接到stackblitz编辑器：https://stackblitz.com/edit/github-krcuye

链接到API需要具有完整的测试功能：https://github.com/TSPeterson206/conspiracyAPI

[API使用knex，种子需要通过以下方式运行：npm run knex seed：run ...由于项目在单击时被删除。

我正在尝试使用HTTP删除请求从数组中删除项目，然后发出HTTP get请求以获取现在更改的数组以继续在应用程序中使用。我可以删除该项目，它似乎要离开数据库。该元素将消失，我可以使用邮递员查看它已消失。在重新加载之前，该应用似乎无法反映出该应用的缺失。我在用于删除的函数中调用了另一个函数，此删除的项目显示为存在（toggleData）。在启动页面中显示{{allNouns.length}}时，我需要实时更新应用程序。我正在使用httpClientModule和tap / concatMap。我玩过async / await和setTimeout，但是到目前为止没有运气。有关操作顺序或如何最好地看到实时结果的任何信息将不胜感激。

仅用于上下文。 this.userNounsHolder是用于允许删除的仪表板的对象数组。 this.allNouns是显示在主页上的字符串数组。 3个复选框（由toggleData处理）确定数组中的字符串。在ngOninit中进行了许多HTTP调用，但这些调用可以很好地处理生成，并且似乎与此特定问题无关。感谢您的关注。

[目前，我只是想让这本书成为名词。单击模式以查看有问题的仪表板。

用于删除的功能

delete(idNum){this.http.delete(`http://localhost:8000/nouns/${idNum}`).pipe(
  concatMap(user => this.http.get(`http://localhost:8000/nouns/${this.user[0].id}`)),
  tap(result => this.userNounsHolder = result)).subscribe(
    this.userNouns = this.userNounsHolder.map(noun => noun.content)
  )
  // console.log('usernouns',this.userNouns, this.allNouns)
  this.toggleData('nouns')
}

包含删除功能的HTML

<jw-modal id="custom-modal-1">
  <div id="dashboardTop">
  <h1 class="modalHeader" style="height:100px">Nouns Dashboard</h1>
  <button class="modalClose" (click)="closeModal('custom-modal-1');">X</button>
</div>
<div *ngFor="let noun of userNounsHolder" class="modalLoop">
  <div class="nounLoop">{{noun.content}}</div>
  <button (click)="delete(noun.id)">X</button>
</div>
</jw-modal>

toggleData功能的TS

toggleData(value) {
if(value==='nouns'){
  console.log('hitting toggledata nouns before', this.userNouns);
    let nounpre=[];
    let nounuser=[];
    let nounalluser=[];

    this.nounBooleans[0] ? nounpre = this.stockNouns:null;
    this.nounBooleans[1] ? nounuser = this.userNouns:null;
    this.nounBooleans[2] ? nounalluser = this.onlyUserNouns : null;
    this.allNouns = nounpre.concat(nounuser).concat(nounalluser);
    console.log('hitting toggledata nouns after', this.userNouns);

}

if(value==='verbs'){
  console.log('hitting toggledata verbs');

  let verbpre=[];
  let verbuser=[];
  let verballuser=[];

  this.verbBooleans[0] ? verbpre = this.stockVerbs:null;
  this.verbBooleans[1] ? verbuser = this.userActions:null;
  this.verbBooleans[2] ? verballuser = this.onlyUserVerbs : null;
  this.allVerbs = verbpre.concat(verbuser).concat(verballuser);
}

if(value==='descriptors'){
  console.log('hitting toggledata descriptors');

  let descriptorpre=[];
  let descriptoruser=[];
  let descriptoralluser=[];

  this.descriptorBooleans[0] ? descriptorpre = this.stockDescriptors:null;
  this.descriptorBooleans[1] ? descriptoruser = this.userDescriptors:null;
  this.descriptorBooleans[2] ? descriptoralluser = this.onlyUserDescriptors : null;
  this.allDescriptors = descriptorpre.concat(descriptoruser).concat(descriptoralluser);
}


  }

Answer 1

想通了。需要不同的方法。使用了async / await和toPromise（），它可以按预期工作。不过，在此期间，我们学到了一些有关abouot的承诺，棱角分明的技巧和堆栈闪电的知识。使用的代码如下：

async delete(idNum,type){
await this.http.delete(`http://localhost:8000/${type}/${idNum}`).toPromise()
if(type==='nouns'){
this.userNouns= await 
this.http.get(`http://localhost:8000/${type}/${this.user[0].id}`).toPromise()
this.userNounsHolder=this.userNouns;
this.userNouns=this.userNouns.map(ele=>ele.content);
}
}