Angular2でngIfの変数の型をチェックする方法

Question

私はAngular2を学んでいます。私はオブジェクトである変数を持つコンポーネントを持っています。 私はオブジェクトのフィールドを反復しています。その位置のデータのタイプに応じて、別のコンポネントをレンダリングする必要があります。 typeofその位置が、これは任意のアイデア

<div> 
    <div *ngIf='obj'> 
    <label *ngFor="let key of keys; let i = index"> 
     <label class='key'>{{key}}:</label> 
     <label class='number' *ngIf='typeof obj[key] === "number"'> 
     <!-- label class='number' *ngIf='obj[key] | typeof === "number"' --> 
     {{ obj[key] }} 
     </label> 
    </label> 
    </div> 
</div> 

が動作していないか、これまでnumberですか？この場合 は、私はTUがlabelことをレンダリングしたいですか

また、私は値を印刷しますが、* ngIf

Answer 1

内windowのようなグローバル、typeof、列挙型、または静的メソッドは、テンプレート内で使用可能でないないときtypeofた仕事を得るためにパイプを作成しました。 componentクラスとtypescript言語の構成要素のメンバーだけが利用可能です。

あなたは

isNumber(val) { return typeof val === 'number'; } 

のようなあなたのコンポーネントにヘルパーメソッドを追加し、これはハックのビットですが、あなたはたくさんでこれを行う必要がある場合

<label class='number' *ngIf='isNumber(obj[key])'> 

Answer 2

のようにそれを使用することができます場所のいくつかを渡すことの邪魔を望んでいない場合は、あなたがそれを慎重に使用する場合は動作する別のオプションがあります。

あなたが探しているオブジェクトまたはタイプのprototypeに存在するプロパティまたはメソッドが存在するかどうかを確認できます。たとえば、すべての数字はそう、toExponential機能を持っている：関数について

<label class='number' *ngIf='obj[key] && obj[key].toExponential'> 

をあなたがconcatために見ることができる配列のために、あなたはtoLowerCaseを探すことができ、文字列のため、callために見ることができる、など

このあなたがチェックしているのと同じ名前のプロパティを所有しているobjectを持っている可能性があるので（ただし、チェックしているプロパティがすべて必要な場合は、基本的にはduck typingです）しかし、あなたが持っている価値が、あなたが良い形をしているプリミティブであることを知っているなら、あなたはプロパティを割り当てることができないのでプリミティブ（このトピックではsome interesting readingです）。

免責事項：これは良いアイデアであり、あまり保守的ではないかもしれませんが、プロトタイプや非常に限定されたユースケースのためにすばやく必要なものがあれば、これは妥当なツールですあなたのベルトにある。

Answer 3

また、コンストラクタ名を比較することもできます。

{{ foo.constructor.name === 'FooClass' }} 

hereについての詳細情報です。

Answer 4

私はこれを試したところ、機能名が短縮されているため、本番では機能しません。instanceOfは、テンプレートで使用できないため、

foo instanceof FooClass 

しかし、あなたがコンポーネント/ディレクティブでこれをしなければならないことに注意してください：

// In your component 
isFoo(candidate){ 
    return candidate instanceOf FooClass; 
} 

// in your template 
{{isFoo(maybeFoo)}}