ngForループのヌル値を確認してください

Question

私のウェブページのボタンに情報を表示しています。ボタンは、リストおよびそのフィールドの複数のオブジェクト（たとえば、object.name、object.ageなど）を表示します。場合によっては、これらのフィールドの1つがヌルです。値がnullであるかどうかを確認するにはどうすればよいですか？もしそれがヌルなら、私は 'Unknown'を印刷したいと思います。今のところは何も印刷しません。

ここだが（私の場合には、環境が時々nullである）私のngForループです：

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary" 
     Name: {{object.name}} <br /> Locations: {{object.date}} <br /> Environments: {{object.environment}} 
</button> 

私はそれが文字列値であるので、私は手動で「不明」に環境を設定することができます知っているが、私はしたいと思いますhtmlでこれを行う方法があるかどうかを知る。

Answer 1

パイプは良い解決策ですが、あなたがしたい場合は、HTMLで直接* ngIfを使用することができます。

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

@Pipe({name: 'unknown'}) 
export class Unknown implements PipeTransform { 
    transform(value: any): any { 
    return value ? value : 'Unknown' 
    } 
} 

：

ここ

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary" 
    Name: <span *ngIf="object.name">{{object.name}}</span> <span *ngIf="!object.name">Unknown</span> 

Answer 2

あなたのパイプは次のようになり何ですコンポーネント内にパイプを含める必要があります。

@Component({ 
... 
pipes: [Unknown] // this is whatever you named your exported class 

その後、あなたのhtmlにあなたはそれがクリーンより読みやすいHTMLのために残し、あなたが