Angular应用嵌入Power BI报表时powerbi-report标签未闭合报错

这个报错和标签本身是否闭合无关，也不是Power BI官方组件存在底层缺陷，核心是模板属性绑定的写法违反Angular语法规则，导致模板解析器无法正确识别标签边界，抛出"未终止"的错误。

具体语法错误点 #

• 最致命的错误：Angular中[属性名]形式的属性绑定，引号内直接写合法表达式/组件类属性即可，不能嵌套双大括号{{}}。双大括号是文本插值语法，用在方括号绑定内部会直接打乱解析器的边界识别逻辑。你代码里[embedConfig] = {{...}}的写法是完全非法的。
• 其余绑定写法也不符合规则：[cssClassName] = { "reportClass" }、[phasedEmbedding] = { false }这类写法里，单独用大括号包裹普通字符串、布尔值属于非法表达式——Angular模板里大括号是对象字面量的边界，不能用来包裹单值。
• 不推荐在模板内直接写多行复杂对象、Map实例、函数逻辑，这类内容放在模板里不仅容易写错语法，也不利于维护。

修复方案 #

1. 先在对应组件的TS类中定义所有需要绑定的配置属性，不要在模板里堆配置：

import { Component } from '@angular/core';
// 按需引入Power BI对应的模型定义
import * as models from 'powerbi-models';

@Component({
  selector: 'app-powerbi-demo',
  templateUrl: './powerbi-demo.component.html'
})
export class PowerbiDemoComponent {
  // 报表嵌入配置
  reportEmbedConfig = {
    type: "report",
    id: "<替换为实际报表ID>",
    embedUrl: "<替换为实际嵌入地址>",
    accessToken: "<替换为实际访问令牌>",
    tokenType: models.TokenType.Embed,
    settings: {
      panes: {
        filters: {
          expanded: false,
          visible: false
        }
      },
      background: models.BackgroundType.Transparent
    }
  };

  // 其余绑定属性
  reportCssClass = "reportClass";
  enablePhasedEmbedding = false;
  reportEventMap = new Map([
    ['loaded', () => console.log('Report loaded')],
    ['rendered', () => console.log('Report rendered')],
    ['error', (event) => console.log(event.detail)]
  ]);
}

2. 模板文件中直接绑定TS类中定义好的属性即可，不要写多余的大括号、插值符号：

<powerbi-report
  [embedConfig]="reportEmbedConfig"
  [cssClassName]="reportCssClass"
  [phasedEmbedding]="enablePhasedEmbedding"
  [eventHandlers]="reportEventMap"
>
</powerbi-report>

注：解析器报"powerbi-report标签未终止"的本质，是解析到[embedConfig]后的双大括号时，误将后续内容识别为插值表达式，一直匹配不到正确的插值闭合标记，就判定开标签没有正常结束，和你写的</powerbi-report>闭合标签没有关系。

语法规则提醒 #

Angular模板绑定有严格的语法边界：

• 方括号[property]用于属性绑定，引号内直接写对应组件实例上的属性/合法表达式，禁止嵌套双大括号插值
• 双大括号{{ expression }}仅用于将表达式结果渲染为页面文本，不能用在属性、事件绑定的内部
• 复杂逻辑、大段配置统一放在TS类中实现，模板只负责声明绑定关系即可

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