Comment vérifier le type de variable dans ngIf dans Angular2
J'apprends Angular2. J'ai un composant avec une variable qui est un objet.
J'itère sur les champs de l'objet, et selon le type de données de cette position, j'ai besoin de rendre un compoenent différent.
Dans ce cas, je veux que tu rend ce label si le typeof cette position est un number Comment jamais cela ne fonctionne pas
<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>
Des idées?
J'ai également créé un tuyau pour obtenir le {[2] } qui fonctionne lorsque j'imprime la valeur, mais pas dans le * ngIf
4 réponses
Globals comme window, typeof, les énumérations ou les méthodes statiques ne sont pas disponibles dans un modèle. Seuls les membres de la classe component et des constructions de langage typescript sont disponibles.
Vous pouvez ajouter une méthode d'aide à votre composant comme
isNumber(val) { return typeof val === 'number'; }
Et l'utiliser comme
<label class='number' *ngIf='isNumber(obj[key])'>
C'est un peu un hack, mais si vous avez besoin de le faire dans beaucoup d'endroits et que vous ne voulez pas passer une fonction isNumber, Il y a une autre option qui peut fonctionner si vous l'utilisez avec soin.
Vous pouvez vérifier l'existence de propriétés ou méthodes qui existent sur le prototype de l'objet ou le type que vous recherchez. Par exemple, tous les numéros ont une toExponential fonction, donc:
<label class='number' *ngIf='obj[key] && obj[key].toExponential'>
Pour les fonctions que vous pourriez regarder pour call, pour les chaînes vous pouvez rechercher toLowerCase, pour les tableaux vous pouvez rechercher concat, etc.
Cette approche n'est pas infaillible du tout, puisque vous pourriez avoir un object qui possède une propriété avec le même nom que vous vérifiez (bien que si la propriété que vous vérifiez est tout ce dont vous avez besoin, alors nous sommes fondamentalement Duck typing), mais si vous savez que la valeur que vous avez est une primitive, vous êtes en bonne forme, puisque vous ne sujet).
Disclaimer: Je ne crois pas vraiment que c'est une bonne idée et peut ne pas être très maintenable ou portable, mais si vous avez juste besoin de quelque chose de rapide pour un prototype ou un cas d'utilisation très limité, c'est un outil raisonnable à avoir dans votre ceinture.
Je viens d'essayer ceci et j'ai trouvé que cela ne fonctionnerait pas en production car les noms de fonctions sont raccourcis. Il est plus sûr d'utiliser quelque chose comme:
foo instanceof FooClass
Mais notez que vous devez le faire dans le composant / directive Car instanceOf n'est pas disponible dans templating:
// In your component
isFoo(candidate){
return candidate instanceOf FooClass;
}
// in your template
{{isFoo(maybeFoo)}}