Masalah dengan setelah ditutup()

Saya memiliki fungsi yang ketika dijalankan ada kalanya navigasi berfungsi dan di lain waktu tidak (terkadang masuk ke if dan di lain waktu masuk ke yang lain). Menurut konsol, hal pertama yang muncul bagi saya adalah console.log yang lain, dan kemudian muncul console.log yang ditemukan dalam dialog yang dibuka, jauh sebelum itu.

Apa yang saya coba:

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

Solusi 1

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:

skrip ketikan

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:

skrip ketikan

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:

skrip ketikan

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:

skrip ketikan

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.

skrip ketikan

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.