无法使用 ngFor 正确填充 Select答案

【问题标题】：Unable to Correctly Populate Select with ngFor无法使用 ngFor 正确填充 Select
【发布时间】：2018-10-16 18:27:55
【问题描述】：

我正在尝试基于组件中的 classificationsList 数组在我的 Angular 应用程序中创建一个 select。截至目前，视图以已经“选择”的第一个值启动，但验证将其标记为无效响应。

如果我选择下拉菜单并选择其他选项，则返回有效。

（选择前）

（选择后）

但是当我返回选择“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>

【问题讨论】：

您如何显示有效/无效的视觉提示？ stackblitz.com/edit/angular-31l9d2 在这里看起来不错。
您可以尝试将默认值属性添加到您的选项中吗？
@Jeto 侧面的红色/绿色标记。这在图片中并不完全清楚。验证在其他任何地方都很好
@MyStackFlowestOver 我看到了这些，我在问它们来自哪里。 <select>s 没有提供开箱即用的东西 :) 你也检查过 StackBlitz 吗？
@Jeto 它们来自组件中的验证方法。我已经用更多信息更新了这个问题。

标签： html angular ngfor

【解决方案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>

【讨论】：