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>

加载时，列表正确绑定到“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值。

有什么建议吗？

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

对我而言，它看起来真的像是一个错误，但如果您正在寻找快速解决方案，您只需将null标识符转换为string即可。它应该解决问题，但你应该采取一些额外的措施来实现这个目标。

参见示例Plnkr example

或者如果你打算按照你提到的ng1那样做，你可以这样做：Plnkr example

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

Answer 3

而不是字符串'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>`

Answer 4

到目前为止，还有一个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 5

将[ngValue]更改为[value]

Angular2选择ngValue null

5 个答案: