Angular ngClass未定义场景处理：合并长度与undefined判断的方法

方案1：使用逻辑非+可选链合并（最简洁） #

直接将前两个判断替换为!item.FinancialDetails?.length即可，修改后的代码如下：

<div class="col" [ngClass]="{'d-none': !item.FinancialDetails?.length || itemFinancials === false }">
    <app-financials [financials]="item.FinancialDetails"></app-financials>
</div>

逻辑说明： #

• 当item.FinancialDetails为undefined时，可选链?.会中断取值返回undefined，!undefined结果为true，匹配原有的undefined判断逻辑
• 当item.FinancialDetails存在但长度为0时，!0结果为true，匹配原有的长度为0判断逻辑
  该写法同时兼容item.FinancialDetails为null的场景，覆盖范围比原有判断更全面。

方案2：使用空值合并运算符（语义更清晰） #

如果更看重代码可读性，可以用空值合并运算符给不存在的属性设置默认长度0，修改后的判断如下：

<div class="col" [ngClass]="{'d-none': (item.FinancialDetails?.length ?? 0) === 0 || itemFinancials === false }">
    <app-financials [financials]="item.FinancialDetails"></app-financials>
</div>

逻辑说明： #

空值合并运算符??会判断左侧值是否为undefined/null，是则返回右侧的默认值0，把两种异常场景的长度都统一为0再做判断，逻辑更直观。

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