Angular2

Question

yılında ngIf içinde değişkenin türünü kontrol etmek nasıl Angular2 öğreniyorum. Bir nesne olan bir değişkene sahip bir bileşenim var. Ben nesnenin alanların üzerine yineleme ve bu pozisyonun veri türüne acording ediyorum , ben farklı compoenent işlemek gerekir. Bu

<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> 

Herhangi bir fikir çalışmıyor nasıl hiç bu durumda , ben tu labeltypeof eğer pozisyon number olduğunu işlemek istiyorum?

Ben de değerini yazdırırken typeof hangi işi almak için bir boru oluşturulur, ancak window, typeof, çeteleler veya statik yöntemler gibi * ngIf

Answer 1

Globals içinde bir şablon içinde bulunmayan değil. Sadece bileşen sınıfının üyeleri ve yazı dili yapıları kullanılabilir. Eğer bir çok bunu yapmak gerekiyorsa

Sen

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

gibi bileşenine bir yardımcı yöntemi ekleyip Bu kesmek biraz

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

Answer 2

gibi kullanabilirsiniz, ancak yerlerin ve çevresindeki bazı isNumber fonksiyonunu geçme cruft istemiyoruz, dikkatli kullanırsanız kullanabilen başka seçenek var.

Sen nesnenin prototype mevcut veya aradığınız yazın özellik ve yöntemlerle varlığını kontrol edebilirsiniz. Eğer toLowerCase için görünebilir dizeleri işlevler için

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

Eğer diziler için size concat için görünebilir, call için görünebilir, vb

Bu: Örneğin tüm sayılar öylesine bir toExponential işlevi var Yaklaşım hiç de kusursuz değildir, çünkü bir object kontrol edebileceğiniz aynı ada sahip bir mülke sahip olabilirsiniz (kontrol etmekte olduğunuz özellik tamamen ihtiyacınız olsa, o zaman temelde duck typing) ama sen üzerinde özelliklerini atanamıyor beri var değeri, sen iyi durumda olduğunu ilkel olduğunu biliyorsanız İlkel (burada bu konuda some interesting reading).

Sorumluluk reddi: Bunun gerçekten iyi bir fikir olduğuna ve çok bakımsız veya taşınabilir olmayabileceğine inanmıyorum, ancak bir prototip veya çok sınırlı kullanım durumu için hızlı bir şeye ihtiyacınız varsa, bu makul bir araçtır kemerinizde var.

Answer 3

Alternatif olarak, yapıcı adını karşılaştırabilirsiniz. Bu here hakkında

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

Detaylı bilgi.

Answer 4

Bunu denedim ve üretim isimlerinin kısaltılmasından dolayı üretimde işe yaramayacağını gördüm.

foo instanceof FooClass 

Ama instanceOf çiftleşmiş mevcut değildir çünkü bileşen/yönergede yapmak zorunda olduğuna dikkat: Aşağıdaki gibi bir şey kullanmak daha güvenlidir

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

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