Angular2 选择 ngValue 为空

Question

这是我正在尝试做的事情:我想要一个选择列表绑定(bind)到一个带有 ngValue 的对象数组，但是第一个选项需要是一个带有 null 的“无”选项。值(value)。

型号:

this.managers = [
  { id: null, name: "(None)" },
  { id: 1, name: "Jeffrey" },
  { id: 2, name: "Walter" },
  { id: 3, name: "Donnie" }
  ];

this.employee = {
  name: "Maude",
  managerId: null
};

查看:

<select [(ngModel)]="employee.managerId">
    <option *ngFor="#manager of managers" [ngValue]="manager.id">{{ manager.name }}</option>
  </select>

加载时，列表正确绑定(bind)到“None”元素。但是，如果您更改为不同的项目并返回，模型值现在会切换为字符串 0: null .这很不方便；这意味着在尝试将其保存到服务器之前，我必须拦截该值并将其手动更改为 null。

这是一个带有演示的 Plunker:http://plnkr.co/edit/BH96RWZmvbbO63ZAxgNX?p=preview

这在 Angular 1 中用额外的 <option value="">None</option> 很容易完成。

这似乎是一个非常常见的场景，但我一直找不到任何解决方案。我也试过添加 <option [ngModel]="null">None</option> , 但结果相同 0: null值(value)。

有什么建议吗？

Answer 1

我会将您重定向到 TabascoMustang 的 reddit 答案，我实现了他的解决方案并且工作出色:

TabascoMustang's reddit answer

this should work (updated for current ng2 rc):

<select [ngModel]="audit.managerId || ''" (ngModelChange)="audit.managerId = $event">
  <option value="">Please Select</option>
  <option *ngFor="let contact of audit.contacts">{{ contact.name }}
  </option>
</select>