より良い*連鎖と '0'値の検出？

Question

ダッシュボードのようなインターフェイスを構築し、以下のeventオブジェクトなどのオプションのフィールドを持つ汎用オブジェクトを頻繁に受信します。テンプレートがロードされた時点でeventが定義されておらず、daysRemaining ?: numberパラメータがある場合とない場合があります。設定されている場合は0となります。

0値が実際に上記のシナリオで印刷されることを確実にするために、我々は、このパターンを使用する：プロパティ「の長さは」タイプ「番号」上に存在しないため

<div *ngIf="event?.daysRemaining?.toString().length > 0"> 
    {{event.daysRemaining}} days 
</div> 

（.toString()が必要です。）

私たちのオブジェクトツリーは、上記の例よりも深くとなる場合があります。親ツリーを<ng-container>の*ngIfで一般的なものにすることはできますが、ほとんどできません。

これを行うには、特にのすべてのオプションで.toString()を呼び出す必要があります。

これは、より効率的なようだ：私たちは（そのようcolor: redときdaysRemaining < 0）<div>に物事を追加、オプションする必要がある場合、我々はまだすべてのチェックが必要であることを

<div> 
    {{event?.daysRemaining + ' days'}} 
</div> 

しかし、欠点があります。

Answer 1

：

get daysRemaining(){ 
    return this.event && (this.event.daysRemaining || this.event.daysRemaining === 0) ? 
      this.event.daysRemaining + ' days' : undefined; 
} 

とテンプレートで：

<div> 
    {{daysRemaining}} 
</div> 

あなたの場合あなたはこれをたくさんしていると思います。 （両方の代替で

<div> 
     {{event?.daysRemaining | printIfDefined: 'days' }} 
</div> 

divがまだそれが何のコンテンツを持っていないとして、それはあなたのアプリケーションに影響を与えるべきではないもののデDOMに注入された：あなたはパイプを作成することができます

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

@Pipe({name: 'printIfDefined'}) 
export class PrintIfDefinedPipe implements PipeTransform { 

    transform(value:number, suffix?:string): number { 
     let suffix = (suffix ? ' ' + suffix : ''); 
     return (value || value === 0) ? value + suffix : undefined; 
    } 

} 

を、テンプレートにCSSのウィット固定幅などがない限り）。

占有DOMスペースがあなたを気にする場合は、別の代替ディレクティブことmigth：

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 

@Directive({ 
    selector: '[print-if-defined]' 
}) 
export class PrintIfDefinedDirective { 

    constructor(private el: ElementRef) { } 

    @Input('suffix') 
    suffix:string; 

    @Input('value') 
    set value(nm:number) { 
    this.el.nativeElement.style.display = nm || nm === 0 ? "" : "none"; 
    this.el.nativeElement.textContent = nm + (this.suffix ? ' ' + this.suffix : ''); 
    } 

} 

とあなたはそれらのすべてがで実行して見ることができます

<div print-if-defined [value]="event?.daysRemaining" suffix="days"></div> 

のようにそれを使用します。 https://plnkr.co/edit/gFeKJilYGdt5ttENjKUG?p=preview

Answer 2

メソッドを使用してコンポーネント内の状態を確認できます。

<div *ngIf="daysRemaining(event)"> 
    {{event.daysRemaining}} days 
</div> 

活字方法は次のようになりますように、私はのようなものを使用するコンポーネントクラスで

daysRemaining(event){ 
    if(event && event.daysRemaining.toString().length > 0){ 
     return true; 
    } else { 
     return false; 
    } 
}