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。