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

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 - 绑定字段必须完全 null - 而不是{{ 1}}，不是空字符串，而是undefined。如果它们不完全相同，你会得到类似的东西，其中没有选择的选项：

当底层组件属性具有任何虚假值时，有没有办法显示给定的null？这样，无论API返回option，0，undefined还是空白字符串（所有常见用例取决于方案），都会显示默认选项而不会损坏用户空白下拉的体验？

编辑：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