mardi 25 septembre 2018

Compound If statement not evaluating to true Angular

I have the following block of code:

<tbody>
    <tr *ngFor="let row of model">
      <ng-container *ngFor="let columnDataName of columnDataNames">
        <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
          <ng-template *ngIf="showRowTextBox && columnDataName === conditionalInputName || columnDataName === conditionCheckBoxName; else otherColumns">
            <ng-container *ngIf="columnDataName === conditionalInputName">
              <input type="text" placeholder="Enter text here" [hidden]="!chkEnabled?.checked" (focusout)="onTextBoxFocusOut(row[primaryKeyColumnName], $event)"/>
            </ng-container>
            <ng-container *ngIf="columnDataName === conditionCheckBoxName">
              <input type="checkbox" [checked]="chkAll?.checked" #chkEnabled ngModel/>
            </ng-container>
          </ng-template>
          <ng-template #otherColumns>
            <ng-container *ngIf="modelConfig[columnDataName].isDate;">
              
            </ng-container>
            <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
              <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
            </ng-container>
            <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
              
            </ng-container>
          </ng-template>
        </td>
      </ng-container>
      <td *ngFor="let buttonColumnName of buttonColumnNames">
        <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'"></button>
      </td>
      <!-- <ng-container *ngIf="showRowTextBox">
        <td>
          <input type="text" placeholder="Enter text here" [hidden]="!chkEnabled.checked" (focusout)="onTextBoxFocusOut(row[primaryKeyColumnName], $event)"/>
        </td>
        <td>
          <input type="checkbox" [checked]="chkAll?.checked" #chkEnabled ngModel/>
        </td>
      </ng-container> -->
    </tr>
  </tbody>

The page does not render as expected, because the if statement below does not evaluate to true.

<ng-template *ngIf="showRowTextBox && columnDataName === conditionalInputName || columnDataName === conditionCheckBoxName; else otherColumns">

The ShowRowTextBox is set to true, and at some point of the iteration, the columnDataName will either be equal to the conditionalInputName or condtionCheckBoxName.

Is my logic incorrect?

Aucun commentaire:

Enregistrer un commentaire