[英]Compound If statement not evaluating to true 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
。
我的邏輯不正確嗎?
參照這個文章,我改變我的標記如下:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.