【解決方法】afterclosed() の問題

この疑問は長い間眠っていたので、問題が何であるかを自己診断するためにどのように取り組むことができたのかを検討する価値があります。 コードを「そのまま」にして、問題を少し整理するとデバッグがどのように簡素化されるかを見てみましょう。 まず、現在のコードは次のようになります。

approved(){
    localStorage.setItem('encargado', this.approach.responsable.id)
    localStorage.setItem('cliente', this.approach.client.id)
    localStorage.setItem('approach', this.id)
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
  }

これは乱雑な古いコードで、何が起こっているのかを解明するのは難しいでしょう。 これをもっと管理しやすいものに分割しましょう。 まず、ストレージを独自のメソッドに分割しましょう。

approved(): void {
  this.writeToLocalStorage();
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

private writeToLocalStorage(): void {
  localStorage.setItem('encargado', this.approach.responsable.id);
  localStorage.setItem('cliente', this.approach.client.id);
  localStorage.setItem('approach', this.id);
}

ここで、ダイアログを処理してみましょう。

private showProjectFormDialog(): void {
const dialog = this.dialog.open(ProjectFormComponent)
    dialog.afterClosed().subscribe( result =>{
this.rest.get("/project?approach=" + this.id)
      .subscribe((data:any)=>{
        console.log(data)
if(data.length>0){
this.rest.put("/approach/" + this.id,{
            approachStatus: 'APROBADO'
          }).subscribe((result:any) =>{
this.router.navigate(["/proyecto/" + data[0].id])
          },error=>{
            console.log('error')
          })
        }else{
          console.log("/project?approach=" + this.id)
        }
      })
    })
}

この時点で、承認済みメッセージを次のように設定できます。

approved(): void {
  this.writeToLocalStorage();
  this.showProjectFormDialog();
}

さて、ダイアログ処理の整理に戻りましょう。 現時点では、インデントとサブスクリプションが混乱しています。 私は TypeScript のことは知っていますが、そこで何が起こっているのか一目では理解できませんでした。そのため、この言語に慣れていない人がこれを手に取ったらどうなるか想像できません。 全体を一度に分解して、いくつかの順序を付けます。

private showFormDialog(): void {
  const dialog = this.dialog.open(ProjectFormComponent);
  dialog.afterClosed().subscribe(result => {
    this.afterProjectFormClosed();
  });
}

private afterProjectFormClosed(): void {
  this.rest.get(`/project?approach={this.id}`).subscribe((data: any) => { updateProject(data); });
}

private updateProject(data: any): void {
  console.log(data);
  if (data.length > 0) {
    addProjectToStatus(data);
  }
  else {
    console.log(`Did not fetch the project at /project?approach={this.id}`);
  }
}

private addProjectToStatus(data: any): void {
  this.rest.put(`/project?approach={this.id}`).subscribe(
    (result:any) =>{ this.router.navigate(["/proyecto/" + data[0].id]); }
     ,error=>{ console.log('error'); });
}

これで、コードが何をしているのかがわかりました。 問題があることの最も明白な候補は、その ID を持つレコードが存在しないことです。 それが私が最初にチェックすることです。 2 番目に注目するのは、残りの呼び出し部分にエラー処理を追加して、ここで 404 エラーや 5xx ステータスのようなものが発生していないかどうかを確認することです。 現時点では、コードにはサブスクリプションが常に適切な情報を返すという単純な仮定があります。 とにかく、コードのヒープ全体を簡単にデバッグできるものに変換する方法を知りたい場合に役立つことを願っています。

注: データ型として any はあまり好きではありませんが、値が返されるかどうかわからないのでそのままにし、一貫したコードを好むためセミコロンと void 型を追加しました。