首页 文章

Angular 2 Custom Pipe无法读取null属性

提问于
浏览 次
1

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

从'@ 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

和：

未处理的Promise拒绝：./DataDrivenComponent类中的错误DataDrivenComponent - 内联模板：37：54由：无法读取null的属性'value';区域：;任务：Promise.then;

angular

3 回答

  • 2

    正如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>
    回复于
  • 1

    以这种方式尝试elvis operator：

    <p>{{val?.value | doubleNumber}}</p>
    回复于
  • 1

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

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

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

    回复于

相关问题