如何在 Angular 2 中使用 ngModel 过滤空值？答案

【问题标题】：How to filter null value using ngModel in Angular 2?如何在 Angular 2 中使用 ngModel 过滤空值？
【发布时间】：2017-05-31 10:58:22
【问题描述】：

流程：

用户提交包含一些数据的表单，用户未填写的一些可选字段在 mongo 中保存为“null”。
稍后，用户决定编辑该表单。
服务抓取表单并将其显示给用户。
表单输入框显示为“null”，因为在第 1 步中他没有填写它们。

所以，我创建了一个管道：

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
name: 'transformNull'
 })

export class TransformNull implements PipeTransform {

transform(value) {
if (value == null) {
  return null;
 }
}

然后，我尝试在 HTML 中分解 ngModel：

[ngModel]="user.extraInfo | transformNull" (ngModelChange)="user.extraInfo.value=$event"

这导致了这个错误：

Cannot set property 'value' of undefined TypeError: Cannot set property 'value' of undefined

我尝试使用 *ngIf="isDataAvailable" 延迟页面加载，错误消失了，用户可以保存表单，值被存储到 mongo 但是刷新页面时，输入框为空。

然后我删除了 *ngIf，添加了 elvis 运算符，但值错误又回来了。

我正在使用 zone.js v0.7.4，尝试使用 0.7.2 和 0.7.5 但没有运气。

我在这里错过了什么？

【问题讨论】：

你检查stackoverflow.com/questions/36016407/…了吗？
怎么样：(ngModelChange)="user.extraInfo = $event" 请移除你的管道“transformNull”
@SaeedPy 移除管道，更改您提到的部分，输入框中仍然为空。
我将if (value == null) 更改为if(value === 'null') 并在管道中添加了else { return value}。然后我在 html 中使用了它：[ngModel]="user.extraInfo | transformNull" (ngModelChange)="user.extraInfo.value = $event"，它起作用了。我现在在路由器上使用解析器，组件在数据到达后加载。

标签： angular angular2-forms angular2-services

【解决方案1】：

ngModel需要拆分成

[ngModel]="user?.extraInfo " (ngModelChange)="user.extraInfo = $event"

【讨论】：

我遇到了一个异常，因为我的绑定目标为空。但多亏了您的提议，它现在可以完美运行了。