无法使用 ngFor 正确填充 Select

Question

我正在尝试根据组件中的 classificationsList 数组在我的 Angular 应用程序中创建一个 select。截至目前，视图已使用第一个值 "selected" 启动，但验证将其标记为无效响应。

如果我 select 下拉菜单并选择其他选项，它 returns 有效。

（在 selection 之前）

（在 selecting 之后）

但是当我返回 select "Class 1" 时，它再次注册为无效。

我希望它做的是默认的空选项（如下所示），一旦 selected 一个真正的选项就会消失。这两个列表之间的区别在于 classificationsList 是动态的，而部门列表是静态的。

事实上，我从部门列表中取出 html 块，只是添加了 *ngFor 块。有人可以在这里告诉我我做错了什么吗？但是，问题并不严格与验证有关。更大的问题是它默认为数组中的第一个值，而不是像 Department 这样的空值。当我从组件端将一个空字符串放入数组的第一项时，它 selects 是空值，就像您看到的 selects "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>

无法使用 ngFor 正确填充 Select

Unable to Correctly Populate Select with ngFor

html

ngfor

angular