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() 并且它按预期工作。 同时也学到了一些关于 promises、angular 和 stackblitz 的东西。 使用的代码如下：

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