Masalah dengan setelah ditutup()

Karena pertanyaan ini sudah lama tidak aktif, ada baiknya melihat bagaimana hal ini dapat diatasi untuk mendiagnosis sendiri apa masalahnya. Mari kita ambil kode “apa adanya”, dan lihat bagaimana sedikit mengatur ulang masalah akan menyederhanakan proses debug. Pertama, seperti inilah tampilan kode saat ini:

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

Itu adalah kode lama yang berantakan, dan akan sulit untuk mengetahui apa yang sedang terjadi. Mari kita pecahkan ini menjadi sesuatu yang lebih mudah dikelola. Pertama, mari kita pecahkan penyimpanan ke dalam metodenya sendiri:

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

Sekarang, mari kita hentikan penanganan dialognya:

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

Pada titik ini, kita dapat mengatur pesan yang disetujui sebagai berikut:

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

Sekarang, mari kita kembali merapikan penanganan dialog. Saat ini, itu adalah lekukan dan langganan yang berantakan. Saya tahu TypeScript dan saya tidak bisa mengetahui apa yang terjadi di sana secara sekilas, jadi saya tidak bisa membayangkan bagaimana jadinya jika seseorang yang baru mengenal bahasa tersebut mempelajarinya. Saya akan memecah semuanya sekaligus, mengaturnya.

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

Sekarang, saya dapat melihat apa yang dilakukan kode tersebut. Kandidat yang paling jelas untuk adanya masalah adalah bahwa catatan dengan id tersebut tidak ada. Itu yang akan saya periksa dulu. Hal kedua yang akan saya lihat adalah menambahkan penanganan kesalahan ke bagian panggilan lainnya untuk melihat apakah saya mendapatkan sesuatu seperti kesalahan 404 di sini, atau status 5xx. Saat ini, kode tersebut memiliki asumsi naif bahwa langganan akan selalu kembali dengan informasi yang baik. Bagaimanapun, saya harap ini membantu Anda jika Anda ingin mengetahui cara mengubah seluruh tumpukan kode menjadi sesuatu yang dapat di-debug dengan mudah.

Catatan: Saya benar-benar tidak menyukai any sebagai tipe data tetapi saya tidak tahu bahwa nilai dikembalikan, jadi saya membiarkannya begitu saja, dan saya telah menambahkan tipe titik koma dan kekosongan karena saya menyukai kode yang konsisten.