如何更简洁地编写Angular模板中的条件判断渲染逻辑？

优化方案 #

你可以借助Angular *ngFor 内置的last上下文变量，配合*ngIf + ng-template的else分支语法实现需求，仅需一次判断即可，同时简化了最后一项的判定逻辑：

<table class="table">
    <thead>
        <tr *ngFor='let entry of m_myArray; let last = last'>
            <td>
                <ng-container *ngIf="last; else textOnly">
                    <a href="" (click)="$event.preventDefault();OnShowRecentRecord()">{{getDateFormat(entry.date)}}</a>
                </ng-container>
                <ng-template #textOnly>
                    {{getDateFormat(entry.date)}}
                </ng-template>
            </td>
        </tr>
    </thead>
</table>

优化说明 #

• *ngFor 自带last（是否为最后一项）、first（是否为第一项）、even/odd（是否为偶数/奇数项）等内置变量，无需手动通过索引和数组长度计算判定，代码可读性更高
• 用*ngIf的else语法关联ng-template，仅做一次条件判断就可以实现两种渲染分支，完全去掉了重复的条件判断逻辑
• 合并了重复的<td>标签，仅对内部渲染内容做区分，减少了DOM结构的冗余，同时修正了你原代码中第二个<td>缺失闭合尖括号的语法问题

如果你觉得ng-template写法略繁琐，也可以用如下更简短的写法：

<table class="table">
    <thead>
        <tr *ngFor='let entry of m_myArray; let last = last'>
            <td>
                <a *ngIf="last" href="" (click)="$event.preventDefault();OnShowRecentRecord()">{{getDateFormat(entry.date)}}</a>
                <ng-container *ngIf="!last">{{getDateFormat(entry.date)}}</ng-container>
            </td>
        </tr>
    </thead>
</table>

内容的提问来源于stack exchange，提问作者user3738290