Съставен оператор If не се оценява на истински Angular

Имам следния блок код:

<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;">
                        {{ row[columnDataName] | date:'d MMM yyyy' }}
                    </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">
                        {{ row[columnDataName] }}
                    </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'">{{buttonColumnName}}</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>

Страницата не се визуализира според очакванията, тъй като изразът if по-долу не се оценява като true.

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

ShowRowTextBox е зададено на true и в даден момент от итерацията columnDataName ще бъде равно на conditionalInputName или condtionCheckBoxName.

Неправилна ли е логиката ми?


person monstertjie_za    schedule 25.09.2018    source източник
comment
Вижте тази връзка: stackoverflow.com/questions/ 44837756/   -  person    schedule 25.09.2018
comment
Това ли е, което търсите? ‹ng-шаблон *ngIf=showRowTextBox && (columnDataName === условноInputName || columnDataName === conditionCheckBoxName); иначе други колони›   -  person Neyxo    schedule 25.09.2018
comment
@Neyxo Опитах се да форматирам изявлението си, както предложихте, но все още се оценява като false   -  person monstertjie_za    schedule 25.09.2018
comment
@Neyxo това наистина ли ще има значение? true && false || true ще даде същия резултат като true && (false || true). Същото, ако размените условията ИЛИ.   -  person VLAZ    schedule 25.09.2018
comment
@vlaz Добре, има смисъл. Не се бях замислял за предимството.   -  person Neyxo    schedule 25.09.2018
comment
@Maheswaran връзката, която предоставихте, изглежда е решила проблема ми, скоро ще публикувам отговора си.   -  person monstertjie_za    schedule 25.09.2018
comment
Вероятно няма връзка, но можете да използвате оператора за безопасна навигация вместо modelConfig[columnDataName] && modelConfig[columnDataName].isVisible, което ви дава modelConfig[columnDataName]?.isVisible   -  person ShamPooSham    schedule 25.09.2018


Отговори (1)


Във връзка с тази статия промених маркирането си, както следва:

<tbody>
    <tr *ngFor="let row of model">
      <ng-container *ngFor="let columnDataName of columnDataNames">
        <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
          <ng-container *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" #chkEnabled ngModel/>
            </ng-container>
          </ng-container>
          <ng-template #otherColumns>
            <ng-container *ngIf="modelConfig[columnDataName].isDate;">
              {{ row[columnDataName] | date:'d MMM yyyy' }}
            </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">
              {{ row[columnDataName] }}
            </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'">{{buttonColumnName}}</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>
person monstertjie_za    schedule 25.09.2018
comment
Да, така е, замяната на първия ‹ng-шаблон› с ‹ng-контейнер› изглежда е решила проблема - person monstertjie_za; 25.09.2018