Angular 2自定义管道无法读取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”，并且出现以下错误：

EXCEPTION: Error in ./DataDrivenComponent class DataDrivenComponent - inline template:37:54 caused by: Cannot read property 'value' of null ErrorHandler.handleError @ error_handler.js:54 (anonymous) @ application_ref.js:261 ZoneDelegate.invoke @ zone.js:334 onInvoke @ ng_zone.js:273 ZoneDelegate.invoke @ zone.js:333 Zone.run @ zone.js:126 (anonymous) @ 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

和：

Unhandled Promise rejection: Error in ./DataDrivenComponent class DataDrivenComponent - inline template:37:54 caused by: Cannot read property 'value' of null ; Zone: ; Task: Promise.then ;

Answer 1

正如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> 

Answer 2

尝试elvis operator这样：

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

Answer 3

你应该在这种情况下使用ngModel。这样的事情：

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

无需使用键控，这将自动更新您的VAL。