ngClass не работает при вызове класса CSS по-разному?

Question

У меня проблема, больше похоже на проблему понимания, почему код работает / не работает при использовании директивы ngClass.У меня есть этот класс CSS внутри component.css

.yellow-text {
    color: yellow;
}

В component.html у меня есть этот простой абзац, nameTest является свойством от компонента, который имеет значение 'Testing'.

<p [ngClass]="{ yellow-text: nameTest === 'Testing' }">ASDASD</p>

Это не скомпилируется, если я не добавлю '' в желтом тексте.

<p [ngClass]="{ 'yellow-text': nameTest === 'Testing' }">ASDASD</p>

С другой стороны, если я сделаю класс css похожим на это

.yellowtext {
    color: yellow;
}

Я могу использовать этот код.

<p [ngClass]="{ yellowtext: nameTest === 'Testing' }">ASDASD</p>

Почему?Что мне не хватает?Извините за вопрос, я, вероятно, упускаю что-то фундаментальное.

Answer 1

Причина, по которой он не компилируется без кавычек, будь они одинарные или двойные, заключается в том, что ngClass ожидает объект, а в Javascript ключам объекта не нужны кавычки, если они содержат только символы, цифры и символы подчеркивания, если клавиши имеют специальные символы, такие как -, в вашем случае вы должны заключать их в кавычки. Например

{this is not valid: 'Not OK'} не является допустимым синтаксисом объекта, чтобы сделать его действительным, вы ставите кавычки вокруг ключа {'this is now valid': 'OK now'}