解析器错误：从 8 到 12 的角度更新期间出现意外标记

Question

我正在将 Angular 版本从 8 更新到 12。我在其中遇到此构建错误。

error NG5002: Parser error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{maxLength}}]}

我的 component.html 错误行如下所示

<div>
    <span>Characters left: {{maxLength - formInputs.accountStatusReasonComment?.length}}</span>
</div> 

这个表达式在 Angular 12 中有任何更新吗？有什么想法吗？

Answer 1

如果 formInputs.accountStatusReasonComment 未定义，则表达式可能会缩减为 {{maxLength - }}。使用 Angular 8 直到运行时才能找到它，但是从 Angular 9 开始，Ivy AoT 是默认的渲染引擎。它可能会发现这些有用的极端情况错误。

您可以尝试以下操作，而不是安全导航运算符

<span>
  Characters left: {{ maxLength - (formInputs.accountStatusReasonComment.length || 0) }}
</span>

如果formInputs.accountStatusReasonComment.length 未定义，则此处将使用数字0。