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：./DataDrivenComponent类DataDrivenComponent中的错误 - 内联模板：37：54引起：无法读取null的属性'value' 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引起：无法读取属性'value'为null;区域：;任务：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>

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

Angular 2 Custom Pipe无法读取null属性

3 个答案: