Sự cố với afterclosed()

Vì câu hỏi này đã không hoạt động trong một thời gian dài nên đáng để xem xét cách giải quyết vấn đề này để tự chẩn đoán vấn đề là gì. Hãy lấy mã “nguyên trạng” và xem việc sắp xếp lại vấn đề một chút sẽ đơn giản hóa việc gỡ lỗi như thế nào. Đầu tiên, mã hiện tại trông như thế này:

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

Đó là một đoạn mã cũ lộn xộn và sẽ rất khó để tìm ra điều gì đang diễn ra. Hãy chia điều này thành một cái gì đó dễ quản lý hơn nhiều. Đầu tiên, hãy chia bộ lưu trữ thành phương thức riêng của nó:

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

Bây giờ, hãy chia nhỏ việc xử lý hộp thoại:

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

Tại thời điểm này, chúng tôi có thể đặt thông báo được phê duyệt như sau:

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

Bây giờ, hãy quay lại việc sắp xếp việc xử lý hộp thoại. Hiện tại, đó là một mớ hỗn độn về thụt lề và đăng ký. Tôi biết TypeScript và tôi không thể hiểu ngay điều gì đang diễn ra trong đó, vì vậy tôi không thể tưởng tượng sẽ như thế nào nếu ai đó mới làm quen với ngôn ngữ này tiếp thu điều này. Tôi sẽ chia nhỏ mọi thứ trong một lần và sắp xếp nó theo thứ tự.

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

Bây giờ, tôi có thể thấy mã đang làm gì. Ứng cử viên rõ ràng nhất cho việc có vấn đề là bản ghi có id đó không tồn tại. Đó là những gì tôi sẽ kiểm tra đầu tiên. Điều thứ hai tôi sẽ xem xét là thêm tính năng xử lý lỗi vào phần cuộc gọi còn lại để xem liệu tôi có gặp phải lỗi nào đó như lỗi 404 ở đây hay trạng thái 5xx hay không. Hiện tại, mã có một giả định ngây thơ rằng đăng ký sẽ luôn quay trở lại với thông tin tốt. Dù sao, tôi hy vọng điều đó sẽ hữu ích với bạn nếu bạn muốn biết cách biến cả đống mã thành thứ có thể gỡ lỗi dễ dàng.

Lưu ý: Tôi thực sự không thích bất kỳ kiểu dữ liệu nào nhưng tôi không biết rằng các giá trị đang được trả về nên tôi đã để nó ở đó và tôi đã thêm dấu chấm phẩy và kiểu trống vì tôi thích mã nhất quán.