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

Question

在以下模板中，当基础 model.militaryStatus 属性为 null 时，"Select Military Status" 选项将成为所选选项。

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

问题是为了选择 "Select Military Status" 选项，ngModel 绑定字段需要完全 null — 不是 undefined，不是空字符串，而是 null。如果它们不完全相等，你会得到类似这样的东西，其中没有选择的选项：

当底层组件属性具有 any 虚假值时，有没有办法显示给定的 option？这样，无论是 API returns 0、undefined、null 还是空白字符串（所有常见用例取决于场景），默认选项将在没有空白下拉列表的破坏用户体验的情况下显示？

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

Answer 1

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

在 ts.

中分配 model.militaryStatus=null

Example

Answer 2

您可以将第一个选项调整为 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。

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

How to select default drop-down option based on falsy value in Angular?

angular2-template

angular