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

像乔·克莱在评论中所说的那是一个超级简单的烟斗。这是一个例子。

顺便说一句，你应该读一下如何编写管道并练习编写它们。一旦掌握了它并且非常有用，它们就非常容易。

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

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

  constructor() {}

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

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

2 个答案: