Behebung von Angular4/5/6 Unexpected token 'px'

Wenn du auf eine Fehlermeldung wie diese stößt:

Parser Error: Unexpected token 'px' at column 3 in [70px] in ng:///AppModule/MyComponent.html@5:34 ("="let string of strings">

schaue dir die Zeile an, auf die sich der Fehler bezieht. Sie wird ähnlich wie diese aussehen:

<mat-expansion-panel-header [collapsedHeight]="70px">

Du hast zwei Möglichkeiten, dies zu beheben:

Option 1: Empfohlen, wenn der Wert (70px in diesem Fall) immer konstant ist.

Entferne die Klammern vom Attribut: [collapsedHeight] zu collapsedHeight. Die Klammern bedeuten, dass der Wert als Javascript interpretiert werden soll, und das Entfernen bedeutet, dass der Wert als Attribut interpretiert wird. Dein Code sollte so aussehen:

<mat-expansion-panel-header collapsedHeight="70px">

Option 2: Angular zwingen, den Wert (70px in diesem Fall) als String zu interpretieren:

Das Hinzufügen von einfachen Anführungszeichen vor und nach dem Wert macht es zu gültigem Javascript:

<mat-expansion-panel-header [collapsedHeight]="'70px'">

Ich empfehle, diese Option nur zu verwenden, wenn du erwartest, dass der Wert in Zukunft ein nicht-konstanter Javascript-Ausdruck wird.