angle 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

あなたは本当に、パイプ、これはより柔軟である

を必要としない、とあなたは簡単にこのヌルチェックの一人一人のために任意の他

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

で"0"を置き換えることができ、あなたはしないでくださいパイプをインスタンス化して関数を実行したい

Answer 2

Joe Clayのコメントは、そのシンプルなパイプのようです。ここに1つの例があります。

ところで、あなたは間違いなくパイプを書いてそれらを書いて練習する方法を読むべきです。彼らはあなたがそれを掛けて非常に便利になったら、本当に簡単です。

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

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

    constructor() {} 

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