Angular Привязка переключателя с использованием значения true false

Question

Я заметил, что должен использовать [value] = true, а не value = true, чтобы мой переключатель мог получить начальное значение из класса компонента. Как это работает - говорит ли Angular об использовании скобок вокруг значения начальное значение из [(ngModel)]?

HTML:

<input type="radio" id ="yesChoice" [(ngModel)] ="serverDeluxe" [value]=true  >
<label for="yesChoice">Yes</label>
<br>
<input type="radio" id ="noChoice"  [(ngModel)] ="serverDeluxe" [value]=false >
<label for="noChoice">No</label>

TS:

export class ServerComponent implements OnInit{
  serverId = 10;
  serverStatus = 'offline';
  serverDeluxe = true;

  ngOnInit(): void {

  }

  getServerStatus(): string{
    return this.serverStatus;
  }
}

Answer 1

Приведенный выше код работает для вас из-за свойства [value]. Он обрабатывает значение как динамическое c значение (как выражение шаблона), следовательно, html может привязать параметр радио.

Если мы предоставим value=true вместо [value]=true, тогда у нас будет для предоставления свойства name.

Для value=true это будет value="true", а для [value]=true как value=true

Answer 2

Как объяснено в документации Angular :

Скобки [] указывают Angular на вычисление выражения шаблона. Если вы опустите скобки, Angular обрабатывает строку как константу и инициализирует целевое свойство этой строкой:

<app-item-detail childItem="parentItem"></app-item-detail>

Если скобки не используются, отображается строка "parentItem", а не значение parentItem.

В вашем случае скобки позволяют установить для радиовхода логическое значение:

[value]="true" <---- Sets the value to the boolean true
value="true"   <---- Sets the value to the string "true"

Начальное значение serverDeluxe привязано к элементу управления с помощью [ngModel] (входит в состав [(ngModel)]). Поскольку serverDeluxe является логическим свойством, оно никогда не будет соответствовать строке "true" или "false".