Angular *ngIf检查时间错误无法读取属性'；楠'；未定义的

我在检查

*ngIf

条件时遇到一个奇怪的错误，请帮助我。 TestPlanComponent.html:115错误类型错误：无法读取未定义的属性“NaN” 在Object.eval[作为updateDirectives]（TestPlanComponent.html:116） 这是

*ngIf

语句。

---

以及为什么总是第二个条件变为现实，正如您所看到的，它总是停止图标

<p-column field="run_now" header="Run Now" width="100px" 
   [style]="{ 'font-size': '12px;', width: '20px;' }" >
   <span 
      *ngIf="projectList[j - page]?.lastExecutionStatus !== 'RUNNING';
          then playButton else stopButton"></span> 
       <ng-template let-col let-j="rowIndex" pTemplate="body" #playButton>
           <img src="./assets/images/play-button.svg" class="material-icons playIcon" 
               (click)="testPlanExecute(projectList[j - page]?.id)" 
               title="{{ projectList[j - page]?.lastExecutionStatus }}"/>
       </ng-template>
       <ng-template let-col let-j="rowIndex" pTemplate="body" #stopButton>
           <img src="./assets/images/stop-button.svg" class="material-icons playIcon" 
               (click)="testPlanAbort(projectList[j - page]?.id)" 
               title="{{ projectList[j - page]?.lastExecutionStatus }}"/>
       </ng-template>
</p-column>

这是一个神秘的错误，并没有告诉任何信息错误。

试试：

<p-column field="run_now" header="Run Now" width="100px" 
   [style]="{ 'font-size': '12px;', width: '20px;' }" >
   <span 
      *ngIf="projectList[j - page] && projectList[j - page]?.lastExecutionStatus !== 'RUNNING';
          then playButton else stopButton"></span> 
       <ng-template let-col let-j="rowIndex" pTemplate="body" #playButton>
           <img src="./assets/images/play-button.svg" class="material-icons playIcon" 
               (click)="testPlanExecute(projectList[j - page]?.id)" 
               title="{{ projectList[j - page]?.lastExecutionStatus }}"/>
       </ng-template>
       <ng-template let-col let-j="rowIndex" pTemplate="body" #stopButton>
           <img src="./assets/images/stop-button.svg" class="material-icons playIcon" 
               (click)="testPlanAbort(projectList[j - page]?.id)" 
               title="{{ projectList[j - page]?.lastExecutionStatus }}"/>
       </ng-template>
</p-column>

---

避免在

*ngIf

中使用可选链：

<span *ngIf="projectList && projectList[j - page] && 
     projectList[j - page].lastExecutionStatus !== 'RUNNING';
     then playButton else stopButton"></span> 

---

projectList[j-page]？

返回未定义并继续下一步

未定义。lastExecutionStatus

抛出错误。

看起来您的一些变量未初始化。因此，尝试调试这些变量，并使用

json

pipe查看这些变量的值：

<p> projectList {{ projectList | json }} </p>
<p> j {{ j | json}} </p>
<p> page {{ page | json  }} </p>

<span *ngIf="projectList && j && page 
    && projectList[j - page].lastExecutionStatus !== 'RUNNING';
    then playButton else stopButton">
</span> 

projectList{{projectList | json}

j{{j|json}

第{page | json}

您可以将ngIf条件逻辑移动到组件中的方法，并将断点放在那里，以便在浏览器中对其进行调试。看起来，当projectList未赋值时，也会执行*ngIf条件。试着这样做：*ngIf=“projectList！=null&&projectList[j-page]？。lastExecutionStatus！=“RUNNING”；然后播放按钮else stopButton”以及为什么无论您为何无理由地向下投票，第二个条件始终为真