Angular HTML中如何用hidden指令替代*ngIf判断元素非undefined？

首先得明确*ngIf和[hidden]的核心差异：

• *ngIf是直接从DOM里添加/移除元素，不存在样式冲突问题
• [hidden]是通过设置display: none隐藏元素，但如果你的.timeSlot类或父元素有更高优先级的CSS规则（比如display: block !important），就会覆盖[hidden]的默认样式，导致效果不符合预期

1. 修正绑定表达式（匹配需求） #

你的需求是仅当timeSlot.track不是undefined时显示元素，原表达式!timeSlot?.track会把0、''、false这些假值也判定为隐藏（和*ngIf="timeSlot.track"行为一致）。如果你的真实需求只是排除undefined，应该改成：

<div class="timeSlot" [hidden]="timeSlot?.track === undefined"></div>

如果需求和*ngIf完全一致（所有假值都隐藏），那原表达式逻辑没问题，问题出在CSS优先级。

2. 强制[hidden]的CSS优先级 #

Angular的[hidden]默认样式优先级不高，很容易被组件或全局样式覆盖。你可以在组件样式或全局样式文件中添加：

[hidden] {
  display: none !important;
}

这样就能确保[hidden]触发时，元素一定会被隐藏。

3. 排查现有CSS冲突 #

检查你的.timeSlot类是否有类似如下规则：

.timeSlot {
  display: block !important;
}

如果有，要么移除!important，要么用上面的方法加强[hidden]的优先级。

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