Angular 2 Custom Pipe 无法读取 null 的属性

Question

我正在尝试做一个自定义管道：

从“@angular/core”导入 { Pipe, PipeTransform }；

@Pipe({
  name: 'doubleNumber'
})
export class DoubleNumberPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    if(value == null)
    {
        return null;
    }
    else{
        return value*2;
    }
  }

}

我在 app.module.ts 的声明装饰器部分声明了它：

declarations: [
AppComponent,
DataDrivenComponent,
DoubleNumberPipe

],

然后我创建了一个 HTML 表单来获取一个数字并将其加倍：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
    <p>Number</p>
    <input type="text" #val (keyup)="0">
    <p>{{val.value | doubleNumber}}</p>
    <hr>
      <h1>Forms</h1>
      <hr>
    </div>
  </div>
</div>

结果页面只有“0”，出现如下错误：

例外：./DataDrivenComponent 类 DataDrivenComponent 中的错误 - 内联模板：37:54 原因：无法读取 null 的属性“值” ErrorHandler.handleError@error_handler.js:54（匿名）@ application_ref.js:261 ZoneDelegate.invoke @ zone.js:334 onInvoke @ ng_zone.js:273 ZoneDelegate.invoke @ zone.js:333 Zone.run @ zone.js:126（匿名）@ zone.js:713 ZoneDelegate.invokeTask @ zone.js:367 onInvokeTask @ ng_zone.js:264 ZoneDelegate.invokeTask @ zone.js:366 Zone.runTask @ zone.js:166 drainMicroTaskQueue @ zone.js:546

还有：

未处理的承诺拒绝：./DataDrivenComponent 类中的错误 DataDrivenComponent - 内联模板：37:54 原因：无法读取 null 的属性“值”；区域：;任务：Promise.then ;

Answer 1

这样试试elvis operator：

<p>{{val?.value | doubleNumber}}</p>

Answer 2

在这种情况下，您应该使用 ngModel。像这样的：

<input type="text" [(ngModel)]="val">
<p *ngIf="val">{{val | doubleNumber}}</p>

无需使用 keyup，这将自动更新您的 val。

Answer 3

正如 mickdev 所建议的......几乎是正确的，但您会收到 NaN 错误，因为您已将输入类型定义为 text。

<input type="text" [(ngModel)]="val">
<p *ngIf="val">{{val | doubleNumber}}</p>

删除它，或替换为type="number"：

<input [(ngModel)]="val">
<p *ngIf="val">{{val | doubleNumber}}</p>