Angular新控制流@if中如何结合逻辑判断引用函数返回值

旧控制流里用*ngIf能直接在条件中结合逻辑判断和as捕获值，但新的@if控制流语法不支持这种写法，得调整结构：

方案1：可选链调用+as捕获 #

@if (column.getValue?.(item) as value) {
  <span>{{value}}</span>
}

column.getValue?.(item)会先检查column.getValue是否存在，存在才执行调用，不存在则返回undefined，条件不成立；调用结果为真时，会把值绑定到value变量中，和原逻辑完全匹配。

方案2：嵌套@if拆分检查与调用 #

如果想要更明确的分步逻辑，可以拆成两层@if：

@if (column.getValue; let getValue) {
  @if (getValue(item) as value) {
    <span>{{value}}</span>
  }
}

第一层先确认column.getValue存在，并用let getValue把函数赋值给变量；第二层调用函数并捕获返回值，严格遵循原逻辑的检查顺序。

原来的写法报错是因为新@if不允许在逻辑与表达式中直接使用as，必须遵循新控制流的语法规则，要么用可选链简化，要么拆分逻辑。

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