无法使用ngFor正确填充选择

Question

我正在尝试根据组件中的select数组在Angular应用中创建classificationsList。到目前为止，该视图以已经“选定”的第一个值开始，但是验证将其标记为无效响应。

如果我选择下拉菜单并选择另一个选项，它将返回有效值。

（选择之前）

（选择后）

但是当我返回选择“ Class 1”时，它再次注册为无效。

我希望这样做是有默认的空选项（如下所示），一旦选择了真实选项，该选项便会消失。这两个列表之间的区别在于classificationsList是动态的，而部门列表是静态的。

实际上，我从部门列表中提取了html块，并仅添加了* ngFor部分。有人可以在这里告诉我我做错了什么吗？但是，问题不仅仅与验证有关。更大的问题是它默认为数组中的第一个值，而不是像Department这样的空值。当我从组件端将空字符串放入数组的第一项时，它选择了空值，就像选择“ Class 1”一样。

由于空字符串无效，其余数组项均有效，因此验证实际上在这里执行得很好。但是，在这种情况下，该选项中仍然有一个空字符串。

<div><label for="titleClass">Title Classification</label></div>
  <select name="titleClass" id="titleClass" ngModel required>
    <option *ngFor="let class of classificationsList">{{class}}</option>
  </select>
</div>

Answer 1

我明白了！我正在寻找的功能要求我设置默认值（未附加到阵列）。为此，我将默认值设置为null，如下所示。

<div class="formBoxRows">
  <div><label for="titleClass">Title Classification</label></div>
  <select name="titleClass" id="titleClass" ngModel required>
    <option *ngFor="let class of classificationsList" [value]=null>{{class}}</option>
  </select>
</div>