Привязка класса на основе значения переменной не работает

Question

Я пытаюсь определить класс динамически для TD, как это.

 <td [className]="'myProject.OverallProjectStatus'" >{{myProject.OverallProjectStatus}}</td>

Но при рендеринге он показывает

 <td class="myProject.OverallProjectStatus" >Green</td>

Я ожидал, что значение этой переменной Зеленое их вот так

 <td class="Green" >Green</td>

Как я могу этого добиться? Я работаю в Angular 9

Answer 1

Переменные контроллера упоминаются в привязках свойств либо в двойных, либо в одинарных кавычках. Следующее относится к допустимой переменной-члену в контроллере.

Ссылается на переменные-члены

<td [className]="myProject.OverallProjectStatus">{{myProject.OverallProjectStatus}}</td>

OR

<td [className]='myProject.OverallProjectStatus'>{{myProject.OverallProjectStatus}}</td>

Если вы смешали их и заключили имя внутренней переменной в другой набор кавычек, тогда переменная будет считаться строковым литералом.

Относится к строковому литералу

<td [className]="'myProject.OverallProjectStatus'">{{myProject.OverallProjectStatus}}</td>

OR

<td [className]='"myProject.OverallProjectStatus"'>{{myProject.OverallProjectStatus}}</td>

Хотя общепринятое соглашение для обозначения переменной-члена и строкового литерала - "myProject.OverallProjectStatus" и "'myProject.OverallProjectStatus'" соответственно.

Answer 2

Удалите ', вам понадобится только ".

<td [className]="myProject.OverallProjectStatus" >{{myProject.OverallProjectStatus}}</td>