Angular2+中三元运算符与模板字面量联用报错，如何解决？

问题原因 #

Angular模板的表达式解析器（Lexer）并不支持ES6的模板字面量语法（即反引号`包裹、${}插值的写法），直接在插值表达式中使用会触发Lexer错误，这就是你遇到问题的核心原因。

可行解决方案 #

1. 将逻辑移至组件类（推荐）

把字符串拼接逻辑封装到组件的TypeScript代码中，模板仅调用对应的属性或方法，这是Angular的最佳实践，也能让模板更简洁：

组件类代码：

// 假设组件类中已定义myVar属性
get propertyStatusText(): string {
  return this.myVar.property ? `${this.myVar.property} IS NOT NULL` : '';
}

模板代码：

<h4>{{ propertyStatusText }}</h4>

2. 模板内使用字符串拼接优化写法

如果一定要在模板中保留三元表达式逻辑，可以继续使用字符串拼接，也可以简化为逻辑与的写法：

<!-- 原三元拼接写法 -->
<h4>{{ myVar.property ? myVar.property + ' IS NOT NULL' : '' }}</h4>

<!-- 简化逻辑写法 -->
<h4>{{ myVar.property && (myVar.property + ' IS NOT NULL') || '' }}</h4>

3. 自定义管道（适合复用场景）

如果这类格式化逻辑需要在多个模板中复用，可以自定义Angular管道：

管道代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'notNullLabel' })
export class NotNullLabelPipe implements PipeTransform {
  transform(value: string | null | undefined): string {
    return value ? `${value} IS NOT NULL` : '';
  }
}

记得在对应模块中声明该管道，之后模板中即可使用：

<h4>{{ myVar.property | notNullLabel }}</h4>

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