Динамически установить выбранный параметр, используя Angular 2+

Question

Я создаю раскрывающийся список <select>, используя HTML5 и angular. Мне нужно, чтобы выбранный <option> был определен динамически через угловое. Если бы это был статический выпадающий список, это можно сделать так:

<select>
  <option value="1" selected>1</option>
  <option value="2">2</option>
</select>

Типичное динамическое значение может быть определено как таковое (при условии, что val1 и val2 объявлены в компоненте):

<select>
  <option [value]="val1">1</option>
  <option [value]="val2">2</option>
</select>

Но, учитывая, что атрибут select не имеет ="" в конце, как его можно назначить динамически? В общем, как можно присвоить такое значение в угловых? Тем более что даже если значение предоставлено selected, оно просто игнорируется. Так, например, <option selected="false"> будет отображаться так же, как <option selected>.

Answer 1

Я в конце концов понял это самостоятельно. Ответ оказывается довольно простым.

(предположим, что value объявлено в компоненте)

<select>
  <option value="1" [selected]="value == 1">1</option>
  <option value="2" [selected]="value == 2">2</option>
</select>

Я не думал, что это сработает, поскольку в простом HTML selected="false" будет отображать то же самое, что и selected. Тем не менее, это имеет смысл, если вы думаете об этом. Добавление скобок [] указывает angular вычислять значение во время компиляции. И если значение ложное, оно никогда не попадет в DOM! Таким образом, с точки зрения HTML, <option value="myValue" [selected]="false"> будет переводиться как <option value="myValue">.