Angular2选择ngValue null

Question

这是我正在尝试做的事情:我想要一个绑定到具有ngValue的对象数组的选择列表,但第一个选项需要是带有null值的"无"选项.

模型:

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>

加载时,列表正确绑定到"无"元素.但是,如果您更改为其他项目并返回,则模型值现在切换为字符串0: null.这非常不方便; 这意味着我必须截取该值并在尝试将其保存到服务器之前手动将其更改为null.

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

这在Angular 1中非常容易完成 <option value="">None</option>

这似乎是一个非常常见的情况,但我一直无法找到任何解决方案.我也试过添加一个<option [ngModel]="null">None</option>,但它会产生相同的0: null值.

有什么建议？

Answer 1

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

TabascoMustang的reddit答案

这应该工作（针对当前的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>

Answer 2

对我来说，这确实看起来像一个错误，但如果您正在寻找快速解决方案，您可以简单地将null标识符转换为string. 它应该可以解决问题，但您应该采取一些额外的措施来使其发挥作用。

请参阅示例Plnkr 示例

或者，如果您打算按照 ng1 中提到的方式执行此操作，则可以这样做：Plnkr example

我知道这不是最好的解决方案，但希望在 NG 团队修复此错误之前能帮助您！

• https://github.com/angular/angular/issues/10349
• https://github.com/angular/angular/pull/12026