Wie überprüft man den Typ der Variablen in ngIf in Angular2

Question

Ich lerne Angular2. Ich habe eine Komponente mit einer Variablen, die ein Objekt ist. Ich überspringe die Felder des Objekts, und entsprechend der Art der Daten dieser Position muss ich eine andere Komponente rendern. In diesem Fall möchte ich tu machen, dass label wenn die typeof diese Position ein number ist wie immer nicht

funktioniert

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

Irgendwelche Ideen?

ich habe auch eine Rohr die typeof die Arbeit zu bekommen, wenn ich den Wert drucken, aber nicht innerhalb der * ngIf

Answer 1

Globals wie window, typeof, Aufzählungen oder statische Methoden ist in einer Vorlage nicht verfügbar ist. Nur Mitglieder der Komponentenklassen- und Typoskriptsprachenkonstrukte sind verfügbar.

Sie können eine Hilfsmethode zu Ihrer Komponente hinzufügen, wie

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

und verwenden Sie es wie

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

Answer 2

Dies ist ein bisschen wie ein Hack, aber wenn Sie dies in viel tun müssen, von Orten und nicht wollen, dass der Cruft einige isNumber Funktion herum passiert, gibt es eine andere Option, die funktionieren kann, wenn Sie es vorsichtig verwenden.

Sie können prüfen, ob Eigenschaften oder Methoden auf dem des gesuchten Objekts oder Typs vorhanden sind. Zum Beispiel haben alle Zahlen eine toExponential Funktion, so:

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

für Funktionen, die Sie für call aussehen könnte, für Streicher Sie toLowerCase, für Arrays aussehen könnte man für concat aussehen könnte, usw.

Diese Ansatz ist überhaupt nicht idiotensicher, da Sie eine object haben könnten, die zufällig eine Eigenschaft mit dem gleichen Namen besitzt, den Sie überprüfen (obwohl, wenn die Eigenschaft, die Sie überprüfen, alles ist, was Sie brauchen, dann sind wir im Grunde duck typing) , aber wenn du weißt, dass dein Wert primitiv ist, bist du gut in Form, da du keine Eigenschaften zuweisen kannst Primitive (hier ist some interesting reading zu diesem Thema).

Haftungsausschluss: Ich traue nicht wirklich, dass dies eine gute Idee ist und möglicherweise nicht sehr wartbar oder tragbar ist, aber wenn Sie nur etwas schnell für einen Prototyp oder einen sehr begrenzten Anwendungsfall benötigen, ist dies ein sinnvolles Werkzeug in deinem Gürtel haben.

Answer 3

Alternativ können Sie den Konstruktornamen vergleichen.

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

Detaillierte Informationen hierzu here.

Answer 4

Ich habe es gerade versucht und festgestellt, dass es in der Produktion nicht funktioniert, weil die Funktionsnamen gekürzt werden.Es ist sicherer, etwas zu verwenden, wie:

foo instanceof FooClass 

Aber beachten Sie, dass diese in der Komponente/Richtlinie zu tun haben, weil instanceOf nicht im Templat ist:

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

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