Разница между назначением тегов с использованием «» и «»

Question

Итак, я изучал угловатый язык и пришел к операторам switch, однако у меня возникла путаница относительно назначения тегов div для операторов switch в отношении makrs .Это HTML-код:

<div [ngSwitch]="color">
  <div *ngSwitchCase="red">You picked red color</div>
  <div *ngSwitchCase="blue">You picked blue color</div>
  <div *ngSwitchCase="green">You picked green color</div>
</div>

, и я объявил переменную color в моем .ts файле

export class StructuralDividesComponent implements OnInit {
public color="red"; 
constructor() { }

ngOnInit() {
}

}

Почему этот код работает, только если colorзначение в "'red'", а не в "red".

Answer 1

Насколько мне известно, когда вы объявляете *ngSwitchCase="'red'", red считается строкой, а angular не ищет ее в свойствах компонента.Если вы объявляете *ngSwitchCase="red", он считает его переменной (свойством компонента) и пытается найти его внутри компонента.Другими словами, angular ожидает JavaScript внутри всех своих собственных директив.

Answer 2

Я думаю, что это основная концепция javaScript.Когда вы даете * ngSwitchCase = "red", он пытается найти красную переменную из ее компонента и заменяет значение.Но если вы хотите сопоставить его со строковым значением, вы должны написать * ngSwitchCase = "'red'"

. Более подробно вы можете увидеть -> Когда использовать двойные или одинарные кавычки вJavaScript?