使用Angular 2 +

Question

我正在使用HTML5和angular创建一个<select>下拉菜单。我需要选定的<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">。