Angular模板中如何实现app-page-header的titleData条件赋值逻辑

问题修正说明 #

你现有代码存在两个核心错误：

1. [titleData] 属于Angular输入属性绑定语法，绑定值的引号内已经是TS表达式上下文，不允许嵌套{{ }}插值符
2. 三元表达式的else分支字符串拼接语法不符合规则

实现方案 #

方案1：直接修改模板表达式

如果需求是当headerOptions.headerTitle === 'Idle Disposition'时，titleData直接赋值为dealDetails?.dealType，写法如下：

<app-page-header
  [titleData]="headerOptions.headerTitle !== 'Idle Disposition' ? headerOptions.headerTitle : dealDetails?.dealType"
  [breadCrumbs]="headerOptions.breadCrumbs"
  [hasTabs]="false"
>

如果你的实际需求是拼接成Idle Disposition (dealType值)的格式（和你原有代码的编写意图一致），写法如下：

<app-page-header
  [titleData]="headerOptions.headerTitle !== 'Idle Disposition' ? headerOptions.headerTitle : `Idle Disposition (${dealDetails?.dealType ?? ''})`"
  [breadCrumbs]="headerOptions.breadCrumbs"
  [hasTabs]="false"
>

其中?? ''是为了避免dealDetails为空时显示undefined的兼容处理。

方案2：逻辑封装到组件类（更推荐）

把判断逻辑放到组件TS文件中用getter封装，模板代码更简洁易维护：

// 组件类中添加
get titleData(): string {
  if (this.headerOptions.headerTitle !== 'Idle Disposition') {
    return this.headerOptions.headerTitle;
  }
  // 直接返回dealType用这行
  // return this.dealDetails?.dealType ?? '';
  // 要拼接格式用这行
  return `Idle Disposition (${this.dealDetails?.dealType ?? ''})`;
}

模板直接绑定即可：

<app-page-header
  [titleData]="titleData"
  [breadCrumbs]="headerOptions.breadCrumbs"
  [hasTabs]="false"
>

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