* ngIf ошибка времени проверки Невозможно прочитать свойство 'NaN' из неопределенного

Question

Я столкнулся со странной ошибкой при проверке состояния *ngIf, пожалуйста, помогите мне. TestPlanComponent. html: 115 ОШИБКА TypeError: Невозможно прочитать свойство 'NaN' неопределенного в Object.eval [как updateDirectives] (TestPlanComponent. html: 116), которое является оператором *ngIf. и почему всегда второе условие сбывается, как вы можете видеть, это всегда остановка Icon.

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

Это загадочная ошибка и не говорит информативной ошибки.

Answer 1

Избегайте использования необязательной цепочки в *ngIf:

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

projectList[j - page]? возвращает неопределенное значение и переходите к следующему шагу undefined.lastExecutionStatus, который выдает ошибку.

Answer 2

Похоже, что некоторые ваши переменные не инициализированы. Поэтому попробуйте отладить эти переменные и посмотреть значения этих переменных, используя 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> 

Answer 3

Попробуйте с:

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