如何根据Angular中的虚假值选择默认下拉选项？

Question

在以下模板中，当基础model.militaryStatus 属性为null 时，“选择军事状态”选项将成为选定选项。

<select [(ngModel)]="model.militaryStatus">
  <option [ngValue]="null">Select Military Status</option>
  <option *ngFor="let status of militaryStatuses" [value]="status.id">{{ status.description }}</option>
</select>

问题在于，为了选择“选择军事状态”选项，ngModel-bound 字段需要准确null——不是undefined，不是空白字符串，但 null。如果它们不完全相等，你会得到这样的东西，没有选择的选项：

当底层组件属性具有 any 虚假值时，有没有办法显示给定的 option？这样，无论 API 返回 0、undefined、null 还是空白字符串（所有常见用例取决于场景），都将显示默认选项，而不会破坏用户体验的空白 drop-下来了吗？

编辑：Here's a stackblitz sandbox showing an example of this issue

Answer 1

您可以将第一个选项调整为model.militaryStatus 的当前值：

• 如果model.militaryStatus为假，则第一个选项的值为model.militaryStatus
• 如果model.militaryStatus为真，则第一个选项的值为null

<select [(ngModel)]="model.militaryStatus">
  <option [ngValue]="!model.militaryStatus ? model.militaryStatus : null">Select Military Status</option>
  <option *ngFor="let status of militaryStatuses" [value]="status.id">{{ status.description }}</option>
</select>

请参阅this stackblitz 以获取演示。

Answer 2

对于模板驱动的表单，我这样做并获得了默认选择。

在ts中分配model.militaryStatus=null。

Example