Angular 角度2：将*ngIf添加到SVG会引发错误

这是我的一个组件的SVG（它将是另一个SVG的子组件）：

。。。

将

*ngIf

添加到带有

SVG

的组件模板时，我遇到一个错误：

未处理的承诺拒绝：模板分析错误：无法绑定到 “ngIf”，因为它不是“：svg:svg”的已知属性

*ngIf

在代码的其他部分（除了

svg

高度

和

宽度

属性绑定工作正常

我已检查了

ngIf

拼写和模型属性。 我测试了添加

BrowserModule

，没有任何区别。 我在

@NgModule

导入中有

CommonModule

具有

SVG

的组件由

componentFactory

生成

---

我有Angular 2 Universal（最新版本）

正如Günter所写，请确保包含svg的模块可以使用CommonModule

这是一个正在工作的弹片

显示红色

正如Günter所写，确保包含svg的模块可以使用CommonModule

这是一个正在工作的弹片

显示红色

使用Angular和SVG设置动态绑定需要在属性之前添加attr前缀

因为*ngIf是[ngIf]的合成糖，所以我通过写出ngIf和ng模板绕过了错误消息：

<ng-template [ngIf]="!label.hasCompensation">
        <svg:text text-anchor="middle" [attr.x]="label.x" [attr.y]="label.y">
                {{label.encoder}} |
                <tspan style="fill:red">{{label.compensation}}</tspan>
        </svg:text>
</ng-template>

{{label.encoder}|
{{label.compensation}}

主要原因是SVG DOM通常不像HTML DOM那样将属性作为属性公开

---

作为参考，Tero Parviainen编写了一篇优秀的

文章，使用Angular和SVG设置动态绑定需要在属性之前添加attr前缀

因为*ngIf是[ngIf]的合成糖，所以我通过写出ngIf和ng模板绕过了错误消息：

<ng-template [ngIf]="!label.hasCompensation">
        <svg:text text-anchor="middle" [attr.x]="label.x" [attr.y]="label.y">
                {{label.encoder}} |
                <tspan style="fill:red">{{label.compensation}}</tspan>
        </svg:text>
</ng-template>

{{label.encoder}|
{{label.compensation}}

主要原因是SVG DOM通常不像HTML DOM那样将属性作为属性公开

---

作为参考，泰罗·帕维亚宁（Tero Parviainen）写了一篇优秀的

文章，你可以用[ngClass]代替*ngIf

在HTML中：

<app-trend-chart [data]="trendData"
 [ngClass]="loading.charts.isLoading? 'chartVisible': 'chartNotVisible'">
</app-trend-chart>

---

您可以使用[ngClass]而不是*ngIf

在HTML中：

<app-trend-chart [data]="trendData"
 [ngClass]="loading.charts.isLoading? 'chartVisible': 'chartNotVisible'">
</app-trend-chart>

---

确保已将

CommonModule

添加到包含回复SVGThank的模块的

imports:[…]

。正如我所提到的，我确实有

CommonModule

。如果我将

ngIf

添加到没有

svg

的父组件中，它会工作！确保已将

CommonModule

添加到包含回复SVGThank的模块的

imports:[…]

。正如我所提到的，我确实有

CommonModule

。如果我将

ngIf

添加到没有

svg

的父组件中，它会工作！

.chartNotVisible {
    display: none;
}

.chartVisible {
    display: block;
}