Angular如何使用ngIf实现仅用户状态为Success时用户名可点击

具体实现代码 #

你可以通过Angular的ng-container容器搭配结构指令实现需求，修改后的完整模板代码如下：

<div class="container">
    <div class="container__usernamesContainer">
        <!-- ng-container作为循环载体，不会生成冗余DOM节点 -->
        <ng-container *ngFor="let user of getUsers()">
            <!-- 状态为Success时渲染可跳转的a标签 -->
            <a 
                *ngIf="user.getStatusLabel() === 'Success'"
                class="container__usernamesContainer--text" 
                [routerLink]="'/user/' + user.getId()"
            >
                Username: {{ user.getUsername() }}
            </a>
            <!-- 状态非Success时仅渲染纯文本，不生成可点击链接 -->
            <span 
                *ngIf="user.getStatusLabel() !== 'Success'"
                class="container__usernamesContainer--text"
            >
                Username: {{ user.getUsername() }}
            </span>
        </ng-container>
    </div>
    <div class="container__statusesContainer">
        <span class="container__statusesContainer--text" *ngFor="let user of getUsers()">
                Status: {{ user.getStatusLabel() }}
        </span> 
    </div>
</div>

可选优化方案 #

如果你希望非Success状态下也保留a标签样式，仅禁用跳转功能，可以简化写法，不需要分支渲染元素：

<a 
    class="container__usernamesContainer--text" 
    [routerLink]="user.getStatusLabel() === 'Success' ? '/user/' + user.getId() : null"
    [class.disabled]="user.getStatusLabel() !== 'Success'"
    *ngFor="let user of getUsers()"
>
    Username: {{ user.getUsername() }}
</a>

同时添加对应的CSS样式即可实现禁用点击的效果：

.container__usernamesContainer--text.disabled {
    pointer-events: none;
    color: #999;
    cursor: default;
}

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