afterclose() 的问题

[ad_1]

我有一个函数,当执行它时,有时导航有效,有时则无效(有时它进入 if,有时它进入 else)。 通过控制台,我首先看到的是 else 的 console.log,然后出现在打开的对话框中找到的 console.log,这比 else 早得多。

我尝试过的:

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

解决方案1

由于这个问题已经休眠很长时间了,因此值得研究一下如何解决这个问题,以自我诊断问题所在。 让我们“按原样”使用代码,看看稍微重新安排一下问题将如何简化调试。 首先,这是当前代码的样子:

打字稿
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 的记录不存在。 这就是我首先要检查的。 我要考虑的第二件事是向其余调用部分添加错误处理,看看我是否收到类似 404 错误或 5xx 状态的信息。 现在,代码有一个天真的假设,即订阅总是会返回良好的信息。 不管怎样,如果你想知道如何将一整堆代码变成可以轻松调试的东西,我希望对你有所帮助。

注意:我真的不喜欢 any 作为数据类型,但我不知道正在返回值,所以我将其保留于此,并且我添加了分号和 void 类型,因为我喜欢一致的代码。

[ad_2]

コメント

标题和URL已复制