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

Posted 2023-03-13

【中文标题】如何在 Angular 2 中使用 ngModel 过滤空值？

【英文标题】：How to filter null value using ngModel in Angular 2?

【发布时间】：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 但没有运气。

我在这里错过了什么？

【问题讨论】：

你检查***.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"，它起作用了。我现在在路由器上使用解析器，组件在数据到达后加载。

【参考方案1】：

ngModel需要拆分成

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

【讨论】：

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