Angular 2自定义管道无法读取null属性

我正在尝试制作自定义管道：

从“@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的declaration decorator部分声明了它：

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>

数

{{val.value | doubleNumber}}


形式

页面上的结果仅为“0”，出现以下错误：

异常：./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原因：无法读取 属性“值”为null；区域：；任务：承诺

试着这样做：

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

{{val？value | doubleNumber}

请尝试以下方法：

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

{{val？value | doubleNumber}

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

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

{{val | doubleNumber}

---

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

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

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

{{val | doubleNumber}

---

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

正如mickdev所建议的那样。。。几乎是正确的，但您得到一个错误，因为您已将输入类型定义为

text

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

---

正如米克德夫所建议的。。。几乎是正确的，但您得到一个错误，因为您已将输入类型定义为

text

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

---

---

尝试此

val？.value

，并显示组件的代码nope。它不能与elvis运算符一起运行。请输入此

val？.value

，然后显示组件的代码。不幸的是，它与猫王运营商不起作用。仍然是同一个人，是的。仍然是我更新的答案。我将

val

包装在条件块中，因此仅当用户提供值时才会对其进行计算。请参阅我的更新答案。我将

val

包装在条件块中，因此仅当用户提供值时才会对其进行计算。它在plnkr链接上工作，但仍然存在相同的错误。我会把这个答案设置为正确的，但是仍然有相同的问题。你可以用你的代码来分叉，例如我的plunker，我很乐意看一下：）好的，等几分钟你现在可以看到了。你分叉了吗，然后url变了，所以你必须给出url:）它在plnkr链接上工作，但仍然有相同的错误。我会将这个答案设置为正确，但仍然有相同的问题。你能用你的代码分叉吗，例如我的plunker，我很乐意看一看：）好的，等几分钟你现在可以看到了。你分叉了吗，然后url变了，所以你必须给出url:）