Angular hover时绑定多值到data-content报逗号不支持错误如何解决

问题原因 #

Angular 的属性绑定语法中，方括号[]内只能写单个合法表达式，你用逗号分隔多个值属于语法错误，所以才会抛出模板解析错误。

实现方案 #

方法1：模板内直接字符串拼接 #

适合逻辑简单的场景，直接用+把3个格式化后的日期拼接为单个字符串，可插入<br>实现换行显示，同时修正你原有代码中style属性绑定的不规范写法：

<a 
  data-trigger="hover" 
  title="Remarks" 
  data-html="true" <!-- 允许解析content中的HTML标签实现换行 -->
  [attr.data-content]="
    (data.timeline['Initial Site Measurement Request'].ideal | date:'dd/MM/yyyy - h:mm a') + '<br>' +
    (data.timeline['Initial Site Measurement Request'].actual | date:'dd/MM/yyyy - h:mm a') + '<br>' +
    (data.timeline['Initial Site Measurement Request'].deadline | date:'dd/MM/yyyy - h:mm a')
  "
  class="pop" 
  (mouseenter)="openpopup($event)"
>
  <div 
    *ngIf="data && data.timeline['Initial Site Measurement Request'].color !==null" 
    [style.background]="data.timeline['Initial Site Measurement Request'].color"
    class="border_coloring" 
    (click)="getNodeDetail(data.timeline['Initial Site Measurement Request'],'Initial Site Measurement Request',data)"
  ></div>
</a>

可根据你的实际业务字段替换上面示例中的actual/deadline字段名

方法2：组件类中封装拼接逻辑 #

适合逻辑复杂、复用性高的场景，把拼接逻辑移到TS文件中，模板更简洁易维护：

1. 组件TS代码

// 首先要在组件的providers数组中引入DatePipe
import { DatePipe } from '@angular/common';
@Component({
  // ... 其他组件配置
  providers: [DatePipe]
})
export class YourComponent {
  constructor(private datePipe: DatePipe) {}

  // 封装获取popover内容的方法
  getTimelinePopContent(timelineItem: any): string {
    const dateFormat = 'dd/MM/yyyy - h:mm a';
    // 按你的实际需求替换三个日期字段名即可
    const idealDate = this.datePipe.transform(timelineItem.ideal, dateFormat);
    const actualDate = this.datePipe.transform(timelineItem.actual, dateFormat);
    const deadlineDate = this.datePipe.transform(timelineItem.deadline, dateFormat);
    // 拼接为带换行的字符串
    return `${idealDate}<br>${actualDate}<br>${deadlineDate}`;
  }
}

2. 简化后的模板代码

<a 
  data-trigger="hover" 
  title="Remarks" 
  data-html="true"
  [attr.data-content]="getTimelinePopContent(data.timeline['Initial Site Measurement Request'])"
  class="pop" 
  (mouseenter)="openpopup($event)"
>
  <div 
    *ngIf="data && data.timeline['Initial Site Measurement Request'].color !==null" 
    [style.background]="data.timeline['Initial Site Measurement Request'].color"
    class="border_coloring" 
    (click)="getNodeDetail(data.timeline['Initial Site Measurement Request'],'Initial Site Measurement Request',data)"
  ></div>
</a>

注意：如果你的popover组件不支持HTML解析，把拼接用的<br>替换为\n或者空格、短横线等文本分隔符即可。

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