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's reddit answer

这应该可以工作（为当前的 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

目前有一个open issue in the github repository 用于此。

作为一种解决方法，我发现添加 ngModelChange 是在视图中将值设置为 null 的最简单方法，而无需向组件添加任何内容。

查看：

<select [(ngModel)]="employee.managerId"
        (ngModelChange)="employee.managerId = $event ? $event : null">
    <option *ngFor="#manager of managers" [value]="manager.id">{{ manager.name }}</option>
</select>

请注意，ngValue 现在是 value

Answer 3

将 [ngValue] 更改为 [value]

Answer 4

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

参见示例Plnkr example

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

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

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

Answer 5

我创建了一个空白对象，而不是字符串“null”，以便稍后在我的 TypeScript 中进行比较。

在组件中：

blankObject = {
   toString() {
      return 'blank object';
   }
};

isBlank() {
    return this.filter.searchValue == null || this.filter.searchValue === this.blankObject;
}

在模板中：

<select [(ngModel)]="filter.searchValue">
   <option [ngValue]="blankObject"></option>
   <option *ngFor="let item of filter.selectOptions" [ngValue]="item.value">
                {{item.label}}
   </option>
</select>`