此条件将始终返回 'false'，因为类型 'Promise<number>' 和 '1' 没有重叠答案

【问题标题】：This condition will always return 'false' since the types 'Promise<number>' and '1' have no overlap此条件将始终返回 'false'，因为类型 'Promise<number>' 和 '1' 没有重叠
【发布时间】：2023-04-01 08:35:01
【问题描述】：

我正在尝试将标签从“pending”或“pendiente”更改为“pending-rejected”或“pendiente-rechazado”。虽然这听起来很简单，但这并不是我想要做的。

这是我用来获取每一行日志的函数。

  async getLogs(formId: string) {
    (await this.supervisorService.getLogs(formId)).subscribe((logs) => {
      console.log("historic length: "+logs.length);
      console.log("onelog: "+logs[0].ID_ESTADO);
      console.log("logs: "+logs.length);
      this.rejectStatus=0;
      for(var i=0; i < logs.length; i++){
        if(logs[i].ID_ESTADO==1227){
          this.rejectStatus=1;
        }
      }      
    });
    return this.rejectStatus;
  }

这就是我试图在 html 中应用它的方式：

<ng-container matColumnDef="lastLog">
  <th mat-header-cell *matHeaderCellDef>Estado</th>
  <td mat-cell *matCellDef="let row">
    <div *ngIf="getLogs(row.ID_FORM) === 1 ; else elseBlock">
      {{row?.lastLog?.ID_ESTADO}}
      Pendiente-Rechazado
    </div>
    <ng-template #elseBlock>
      <app-state [state]="row?.lastLog?.ID_ESTADO"></app-state>
    </ng-template>        
  </td>
</ng-container>

但我得到了错误：

错误 TS2367：此条件将始终返回“假”，因为 'Promise' 和 '1' 类型没有重叠。

我能做什么，因为我读到的解决方案不适用于 HTML。

您可以在此处找到这两个文件： https://stackblitz.com/edit/angular-ivy-t5dfrq?file=src/app/forms-table/forms-table.component.html

【问题讨论】：

你能在 ngOnInit 上调用这个 getLog，然后做这样的事情吗？ `
` 我只是在猜测，如果你能分享一个很棒的堆栈闪电战，
@amnah 嘿，我刚刚更新了这个并添加了 stackblitz，这当然更像是一个视觉帮助，因为它不会编译，因为这是一个非常复杂的项目。希望你能去看看。

标签： angular

【解决方案1】：

一般来说，将函数绑定到像*ngIf 这样的结构指令是不优雅的，因为该函数将在每个更改检测周期触发（使用默认 CD 策略）。将它与（可能的？）HTTP 请求结合起来可能会导致多个同时发生的 HTTP 请求。
您可以使用 JS Array#some 函数来代替手动循环数组。

尝试以下更改

控制器 (*.ts)

// I assume the material table input is initialized in a subscription

this.someService.fetchData().pipe(
  switchMap((res: any) =>            // <-- switch to another observable
    this.supervisorService.getLogs(res.ID_FORM).pipe(  
      map(logs => ({                 // <-- map to transform data
        ...res,                      // <-- spread operator to retain old values
        rejected: logs.some(log => log.ID_ESTADO == 1227)
      }))
    )
  )
).subscribe({
  next: (res: any) => this.someVar = res,
  error: (error: any) => console.log(error)
});

模板 (*.html)

<ng-container matColumnDef="lastLog">
  <th mat-header-cell *matHeaderCellDef>Estado</th>
  <td mat-cell *matCellDef="let row">
    <div *ngIf="row?.rejected; else elseBlock">
      {{row?.lastLog?.ID_ESTADO}}
      Pendiente-Rechazado
    </div>
    <ng-template #elseBlock>
      <app-state [state]="row?.lastLog?.ID_ESTADO"></app-state>
    </ng-template>        
  </td>
</ng-container>

【讨论】：

完全同意第1点，但由于我刚到这个项目，我无法实现这一点。我刚刚添加了一个 stackblitz 链接来帮助可视化。我希望你能检查一下。
@FeberCastellon：很抱歉我无法修复代码。它有多个嵌套订阅，它需要的时间比我投资的要长。我可以看到使用带有缓冲区1 的ReplaySubject 来保存当前的forms，使用switchMap 映射b/n 个不同的可观察对象，tap 执行副作用，在模板中使用async 管道初始化表格。

【解决方案2】：

你可以去 *ngIf="rejectStatus"

如果为1，则条件为真，否则为假。也不需要在函数中返回相同的值。您只需要设置变量的值。

【讨论】：

【解决方案3】：

谢谢大家，这最终对我有用：

ts 文件（当然，getForms 函数总是在 ngOnInit 中运行）：

  getLogs(formId: string, index: number) {
        
      this.supervisorService.getLogs(formId).subscribe((logs) => {
        console.log("historic length: "+logs.length);
        console.log("onelog: "+logs[0].ID_ESTADO);
        console.log("logs: "+logs.length);
        this.rejectStatus=0;
        console.log("initial reject status: "+this.rejectStatus);
        
        for(var i=0; i < logs.length; i++){
          if(logs[i].ID_ESTADO==1227){
            this.rejectStatus=1;
          }
        }        
        this.data[index].rejectStatus=this.rejectStatus;
        console.log("counter: "+index);
      });
      console.log("final reject status: "+this.rejectStatus);
    
  }

  async getForms() {
    (await this.supervisorService.getForms())
    .subscribe(async (forms) => {      
      for(var y=0; y<forms.length; y++ ){  
        await this.getLogs(forms[y].ID_FORM, y);
      }
      this.dataSource.data = forms;
      this.data = forms;
      console.log("actual data: "+this.data);
    });
  }

这是html：

<ng-container matColumnDef="lastLog">
  <th mat-header-cell *matHeaderCellDef>Estado</th>
  <td mat-cell *matCellDef="let row">
    <div *ngIf="row.rejectStatus === 1 ; else elseBlock">
      Pendiente-Rechazado
    </div>
    <ng-template #elseBlock>
      <app-state [state]="row?.lastLog?.ID_ESTADO"></app-state>
    </ng-template>        
  </td>
</ng-container>

谢谢大家，特别是最后一个回答，因为即使应用不好，也让我对这个问题有了新的认识。

【讨论】：