在选择选项中如何在 Angular 中设置一个默认值 - Javascript

在 Angular 中，你可以通过 [(ngModel)] 指令绑定一个选择框的值。当用户选择一个选项时，这个值就会被更新。但是如果你希望在用户未做出选择的情况下预设一个默认值，该怎么做呢？

设置默认值

为了在选择框中设置一个默认值，我们可以在 [(ngModel)] 中加上一个默认值。例如：

<select [(ngModel)]="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

在这个例子中，我们设置了一个叫做 selectedOption 的变量来绑定选择框的值。我们可以通过在组件中初始化它来设置默认值：

selectedOption = 'option2';

这将会预设所选中的选项为 "Option 2"。当用户选择了其他选项时，这个变量的值将会更新。

设置默认选择项

在某些情况下，你可能想要在选项列表中预设一个默认的选择项。例如，你可以在下拉框中的顶部添加一个默认的 “请选择” 选项。为了实现这个效果，我们可以添加一个空的 option 元素，并设置它的 selected 属性为 true：

<select [(ngModel)]="selectedOption">
  <option selected disabled hidden>请选择</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

在这个例子中，我们添加了一个空的 option 元素，它的 selected、disabled 和 hidden 属性确保了它不会被选中或显示出来。这个元素只是用来占据选择框中的第一个位置，并标识为默认选项。用户选择了其他选项后，默认选项将会被移除。

总结

在选择框中设置默认值和默认选择项是一件非常简单的事情。通过在 [(ngModel)] 中设置一个默认值，我们可以让选择框一开始就显示一个默认值。如果我们希望把默认值作为一个选项展示在下拉框中，我们可以添加一个空的 option 元素，并设置它的 selected 属性为 true。这两个技巧可以让我们方便地控制选择框的默认值。