Question 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. Je parcoure les champs de l'objet et, selon le type de données de cette position, j'ai besoin de rendre un autre composant. Dans ce cas, je veux que tu rendes ça label si la typeof cette position est un number comment 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 aussi créé un tuyau pour obtenir le typeof qui fonctionne quand j'imprime la valeur, mais pas dans le * ngIf


21
2018-05-29 14:27


origine


Réponses:


Globals aiment window, typeof, les énumérations ou les méthodes statiques ne sont pas disponibles dans un modèle. Seuls les membres des constructions de classe de composant et de langage typographique sont disponibles.

Vous pouvez ajouter une méthode d'assistance à votre composant comme

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

et l'utiliser comme

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

38
2018-05-29 14:37



Vous pouvez également comparer le nom du constructeur.

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

Informations détaillées à ce sujet ici.


7
2018-05-29 07:36



C'est un peu un hack, mais si vous avez besoin de le faire dans beaucoup d'endroits et que vous ne voulez pas que certains subissent des erreurs isNumber fonction autour, 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 de méthodes qui existent sur le prototype de l'objet ou du type que vous recherchez. Par exemple, tous les nombres ont un toExponential fonction, donc:

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

Pour les fonctions que vous pourriez rechercher call, pour les chaînes que vous pouvez rechercher toLowerCase, pour les tableaux, vous pouvez chercher concat, etc.

Cette approche n’est pas du tout infaillible, puisque vous pourriez avoir une object il se trouve que vous possédez une propriété avec le même nom que vous vérifiez (même si la propriété que vous vérifiez est tout ce dont vous avez besoin, Dactylographie), mais si vous savez que la valeur que vous avez est une primitive, vous êtes en bonne forme, car vous ne pouvez pas attribuer de propriétés aux primitives (voici une lecture intéressante sur ce sujet).

Disclaimer: Je ne crois pas vraiment que ce soit une bonne idée et que cela ne soit pas très facile à maintenir ou à transporter, 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 .


2
2018-03-02 22:36



Je viens d’essayer et je trouve que cela ne fonctionnera 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 en modèles:

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

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

0
2017-08-14 07:37