Angular 2: Hinzufügen * ngIf zu SVG wirft einen Fehler

Question

Das ist mein SVG einer Komponente (die ein Kind ein anderes svg sein wird):

<svg *ngIf="complete" [attr.width]="width" [attr.height]="height" viewBox="0 0 180 100" version="1.1" xml:space="preserve" style="overflow:visible;stroke-linejoin:round;stroke-miterlimit:1.41421;"> ...</svg> 

Ich erhalte eine Fehlermeldung, wenn *ngIf auf eine Komponente hinzugefügt Vorlage mit SVG:

Unhandle Versprechen Ablehnung: Template Fehler analysieren: binden kann nicht an 'ngIf', da es keine bekannte Eigenschaft ist ': svg: svg'.

*ngIf arbeitet auf andere Teile des Codes in Ordnung, außer svg

Height und Width Attribute Bindung funktioniert gut.

Ich habe ngIf Rechtschreib- und Modelleigenschaften überprüft. Ich testete das Hinzufügen BrowserModule, machte keinen Unterschied. Ich habe CommonModule in @NgModule importiert.

Die Komponente mit der SVG wird von componentFactory generiert.

Ich habe Angular 2 Universal (neueste Version)

Answer 1

Als Günter sicher, dass Sie die CommonModule an das Modul zur Verfügung haben machen schrieb, dass die svg

Hier enthält ein Arbeits ist plunkr https://plnkr.co/edit/XgU2Ns?p=preview

<svg width="100%" height="100%"> 
    <rect 
    x="20" 
    y="20" 
    width="100" 
    height="100" 
    /> 

    <rect 
    *ngIf="showRed" 
    x="140" 
    y="20" 
    width="100" 
    height="100" 
    style="fill: red;" 
    /> 
</svg> 

<button type="button" (click)="showRed = !showRed">Show Red</button> 

Answer 2

Das Einrichten dynamischer Bindungen mit Angular und SVG erfordert, dass Sie das Attr-Präfix vor dem Attribut hinzufügen.

Da * ngIf syntaktischer Zucker ist für [ngIf], ich habe die ngIf durch das Schreiben aus um die Fehlermeldung erhalten und die ng-Vorlage:

<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> 

Der Hauptgrund dafür ist, dass die SVG Im Allgemeinen stellt DOM Attribute nicht als Eigenschaften wie das HTML-DOM zur Verfügung.

Als Referenz Tero Parviainen geschrieben hat eine ausgezeichnete post on his blog.