角度2:使用管道将未定义的值替换为零

Question

我有一个var_all带有一些数值变量的值数组,可能有也可能没有.

我使用以下代码创建一组显示值的框.方框不会改变:

<div id="box1">My variable one: {{var_all?.var_one}} </div>
<div id="box2">My variable two: {{var_all?.var_two}} </div>
<div id="box3">My variable three: {{var_all?.var_three}} </div>

当元素不可用时,框未填充.

在这种情况下,我希望显示零值而不是任何值.

有没有办法用管道做？或者使用js函数创建一个填充零的元素更好.

Answer 1

你真的不需要管道

这更灵活,您可以轻松地"0"用其他任何东西替换它

{{var_all?.var_one || "0"}}

对于每个空检查,您不希望实例化管道并为其运行函数.

Answer 2

就像 Joe Clay 在评论中所说的那样，它是一个超级简单的管道。这是一个例子。

顺便说一句，您绝对应该阅读如何编写管道并练习编写它们。一旦你掌握了它，它们真的很容易并且非常有用。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'noNull'})
export class NoNullPipe implements PipeTransform {

  constructor() {}

  transform(num: number | null): number {
    return num ? num : 0;
  }
}