如何解决*ngIf中使用方括号取值触发模板解析错误的问题

错误根因 #

模板解析错误是因为你在*ngIf的外层双引号内部，又使用了双引号包裹timeline的对象键名，引号配对出现混乱导致的。

解决方案 #

方案1：修改引号类型+可选链兜底（推荐，Angular 12+适用）

把对象键的包裹引号换成单引号，同时加上可选链操作符?.处理层级属性不存在的场景，避免运行时报错：

<i *ngIf="data?.timeline?.['Initial Site Measurement Request']?.ideal" class="fa fa-pencil ml-2" style="cursor: pointer;" (click)="changeexpexteddate('Lead',data.lead_id,'Initial Site Measurement Request',data)"></i>

方案2：逐层显式判断（兼容低版本Angular）

如果使用的Angular版本不支持可选链，就逐层做非空判断，同时替换键名的引号为单引号：

<i *ngIf="data && data.timeline && data.timeline['Initial Site Measurement Request'] && data.timeline['Initial Site Measurement Request'].ideal" class="fa fa-pencil ml-2" style="cursor: pointer;" (click)="changeexpexteddate('Lead',data.lead_id,'Initial Site Measurement Request',data)"></i>

方案3：判断逻辑抽离到组件类

如果判断逻辑多处复用，可以把逻辑写到组件的ts文件中：

// 组件类中增加方法
checkIdealDateExist(data: any): boolean {
  return !!(data && data.timeline && data.timeline['Initial Site Measurement Request'] && data.timeline['Initial Site Measurement Request'].ideal);
}

模板中直接调用方法即可：

<i *ngIf="checkIdealDateExist(data)" class="fa fa-pencil ml-2" style="cursor: pointer;" (click)="changeexpexteddate('Lead',data.lead_id,'Initial Site Measurement Request',data)"></i>

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