Jak sprawdzić typ zmiennej w ngIf w Angular2

Question

Uczę się Angular2. Mam komponent ze zmienną, która jest obiektem. Jestem Iterowanie nad pola obiektu i zgodnie z typem danych tej pozycji, muszę renderować inny kompoenent. W tym przypadku, chcę tu czynią to label jeśli typeof że pozycja jest number jaki kiedykolwiek to nie działa

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

Jakieś pomysły?

Mam również stworzył rury dostać które działają na typeof podczas drukowania wartości, ale nie wewnątrz * ngIf

Answer 1

Globals jak window, typeof, teksty stałe lub metody statyczne nie są dostępne w szablonie. Dostępne są tylko elementy składowe klasy komponentów i maszynopisów.

Możesz dodać metodę pomocnika do składnika jak

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

i używać go jak

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

Answer 2

Jest to bit hack, ale jeśli trzeba to zrobić w dużo miejsc i nie chcesz, aby funkcja przechodzenia wokół funkcji isNumber była dostępna, jest inna opcja, która może działać, jeśli używasz jej ostrożnie.

Można sprawdzić, czy istnieją właściwości lub metody dostępne w obiekcie lub typie, których szukasz. Na przykład, wszystkie liczby mają toExponential funkcji, więc:

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

dla funkcji można szukać call, ciągów można szukać toLowerCase, na tablicach można szukać concat itd

ten podejście nie jest całkowicie niezawodne, ponieważ możesz mieć object, które zdaje się mieć właściwość o tej samej nazwie, którą sprawdzasz (chociaż jeśli nieruchomość, którą sprawdzasz, jest wszystkim, czego potrzebujesz, to w zasadzie jesteśmy duck typing) , ale jeśli wiesz, że masz wartość prymitywu, jesteś w dobrej formie, ponieważ nie możesz przypisać właściwości prymitywy (tutaj jest some interesting reading na ten temat).

Oświadczenie: Nie mam zaufania, że ​​jest to dobry pomysł i może nie być bardzo łatwy w utrzymaniu lub przenośny, ale jeśli potrzebujesz czegoś szybkiego do prototypu lub bardzo ograniczonego zastosowania, jest to rozsądne narzędzie do mieć w swoim pasie.

Answer 3

Alternatywnie można porównać nazwę konstruktora.

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

Szczegółowe informacje na temat tego here.

Answer 4

Po prostu próbowałem tego i stwierdził, że nie będzie działać w produkcji, ponieważ nazwy funkcji są skrócone.Bezpieczniej jest używać coś takiego:

foo instanceof FooClass 

Należy jednak pamiętać, że trzeba to zrobić w części/dyrektywy, ponieważ instanceOf nie jest dostępny w szablonów:

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

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