Angular: Não é possível interpolar ({{}}) no atributo de classe da forma svg

Criado em 27 mai. 2016 · 3Comentários · Fonte: angular/angular

Estou enviando um...
[x] relatório de bug
[ ] solicitação de recurso
[ ] solicitação de suporte => Por favor, não envie solicitação de suporte aqui, veja a nota na parte superior deste modelo.

Comportamento atual
Não é possível interpolar ({{}}) no atributo class de uma forma svg, a menos que o mesmo elemento também tenha [ngClass]="" nele.

Comportamento esperado/desejado
A interpolação de texto arbitrário no atributo de classe de qualquer elemento deve ser possível - com ou sem [ngClass]=""

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, uma demonstração mínima do problema via
Reproduzido aqui:
https://plnkr.co/edit/mVe6NH?p=preview
Qual é o comportamento esperado?
Ambas as linhas, bem como a h1, devem ficar vermelhas como resultado da aplicação da classe 'red'.
Qual é a motivação/caso de uso para mudar o comportamento?
.. deveria haver ordem no mundo ¯_(ツ)_/¯
Por favor, conte-nos sobre o seu ambiente:
Versão angular: 2.0.0-rc1
Navegador: [ Chrome 50 | Firefox 34 | Safári 9.0.3 ]
Idioma: [TypeScript]

Fonte

lsim

Comentários muito úteis

Você deve vincular ao atributo com SVG, ou seja, [attr.class]="color"

vicb em 27 mai. 2016

👍2

Todos 3 comentários

Você deve vincular ao atributo com SVG, ou seja, [attr.class]="color"

vicb em 27 mai. 2016

👍2

Obrigado por essa dica - funciona como um encanto!

Espero não ser o último a ser pego de surpresa por essa aparente inconsistência, no entanto. Eu gastei um pouco de tempo procurando regras especiais sobre svg nos documentos angulares - mas saí de mãos vazias. O que eu perdi?

lsim em 28 mai. 2016

👍1

Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se você estiver encontrando um problema semelhante ou relacionado.

Leia mais sobre nossa política de bloqueio automático de conversas .

_{_Esta ação foi realizada automaticamente por um bot._}