Angular字段为null时显示横杠 空值导致div位置上移如何解决

你写的|| '-'逻辑未生效、横杠不展示，主要有这几个常见原因：

• Angular模板中管道运算符优先级高于逻辑运算符，部分场景下空值经管道处理后返回的空值未被||正确捕获
• 如果你开启了严格模板类型检查，data.date这类可选属性读取时可能隐性报错，导致整个表达式不渲染输出
• 逻辑或||会把0、''这类合法的falsy值也判定为需要兜底，不符合仅针对null/undefined兜底的需求

方案1：优先使用空值合并运算符（Angular 12+推荐） #

空值合并运算符??仅会在左侧值为null/undefined时触发兜底，同时给管道运算加上括号明确优先级，可选属性加?.避免类型报错：

<div>{{ (data?.date | date:'d-MMM-y') ?? '-' }}</div>
<div>{{ data?.id ?? '-' }}</div>

方案2：低版本Angular用三元表达式兼容 #

如果你的Angular版本低于12不支持??，直接用三元表达式明确判断空值：

<div>{{ data?.date ? (data.date | date:'d-MMM-y') : '-' }}</div>
<div>{{ data?.id !== null && data?.id !== undefined ? data.id : '-' }}</div>

方案3：CSS兜底避免移位 #

如果担心特殊场景下内容为空导致div移位，可以给对应容器加最小高度固定占位：

.field-item {
  min-height: 22px; /* 调整为和你的正常文本行高一致即可 */
  line-height: 22px;
}

对应HTML绑定类名：

<div class="field-item">{{ (data?.date | date:'d-MMM-y') ?? '-' }}</div>
<div class="field-item">{{ data?.id ?? '-' }}</div>

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