web-dev-qa-db-fra.com

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 parcourt les champs de l'objet et, en fonction du type de données de cette position, je dois restituer un autre composant . cas, je veux que tu rendes ce label si le typeof cette position est un number quelle que soit la façon dont 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 la variable typeof qui fonctionne lorsque j'imprime la valeur, mais pas à l'intérieur de la * ngIf

javascriptangular
32
Pablo

Des variables globales telles que window, typeof, enums ou méthodes statiques ne sont pas disponibles dans un modèle. Seuls les membres de la classe de composant et les constructions de langage TypeScript 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])'>
52
Günter Zöchbauer

Alternativement, vous pouvez comparer le nom du constructeur.

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

Informations détaillées à ce sujet ici .

9
zurfyx

C'est un peu un bidouillage, mais si vous avez besoin de le faire dans beaucoup d'endroits et que vous ne voulez pas du tout se passer de la fonction isNumber, il existe une autre option qui peut fonctionner si vous l'utilisez avec précaution.

Vous pouvez vérifier l'existence de propriétés ou de méthodes existant dans la variable prototype de l'objet ou du type recherché. Par exemple, tous les nombres ont une fonction toExponential , donc:

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

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

Cette approche n’est pas infaillible du tout, car vous pourriez avoir une object possédant une propriété portant le même nom que celui que vous vérifiez (bien que si la propriété que vous vérifiez est tout ce dont vous avez besoin, alors nous sommes canard en tapant ), mais si vous savez que la valeur que vous avez est une primitive, vous êtes en bonne forme, car vous ne pouvez pas affecter de propriétés aux primitives (voici une lecture intéressante sur ce 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 à votre ceinture .

2
tobek

Je viens d'essayer et j'ai constaté 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 faire cela dans le composant/directive car instanceOf n'est pas disponible dans les modèles:

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

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