Cómo comprobar el tipo de variable en ngIf en Angular2

Estoy aprendiendo Angular2. Tengo un componente con una variable que es un objeto. Estoy iterando sobre los campos del objeto, y de acuerdo con el tipo de datos de esa posición, necesito renderizar un compoenent diferente. En este caso, quiero que tu render label si el typeof esa posición es un number cómo siempre esto no está funcionando

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

¿Alguna idea?

También he creado una tubería para obtener el typeof que funciona cuando imprimo el valor, pero no dentro del *ngIf

Author: Pablo, 2016-05-29
Source

4 answers

Globales como window, typeof, las enumeraciones o los métodos estáticos no están disponibles dentro de una plantilla. Solo están disponibles los miembros de la clase component y las construcciones del lenguaje typescript.

Puede agregar un método helper a su componente como

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

Y usarlo como 

<label class='number' *ngIf='isNumber(obj[key])'>
 42
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-29 14:37:47

Alternativamente, puede comparar el nombre del constructor.

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

Información detallada sobre esto aquí .

 7
Author: zurfyx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-29 07:36:01

Esto es un poco de un truco, pero si necesita hacer esto en muchos lugares y no quiere el meollo de pasar alguna función isNumber, hay otra opción que puede funcionar si la usa con cuidado.

Puede comprobar la existencia de propiedades o métodos que existen en el prototype del objeto o tipo que está buscando. Por ejemplo, todos los números tienen una toExponential función, entonces: 

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

Para las funciones podrías buscar call, para las cadenas podrías buscar toLowerCase, para los arrays se puede buscar concat, etc.

Este enfoque no es infalible en absoluto, ya que podría tener un object que pasa a poseer una propiedad con el mismo nombre que está comprobando (aunque si la propiedad que está comprobando es todo lo que necesita, entonces básicamente estamos escribiendo duck), pero si sabe que el valor que tiene es una primitiva, está en buena forma, ya que no puede asignar propiedades a primitivas (aquí hay una lectura interesante sobre eso tema).

Descargo de responsabilidad: Realmente no confío en que esta sea una buena idea y puede no ser muy mantenible o portátil, pero si solo necesita algo rápido para un prototipo o un caso de uso muy limitado, esta es una herramienta razonable para tener en su cinturón.

 2
Author: tobek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-02 22:36:50

Acabo de probar esto y descubrí que no funcionará en producción porque los nombres de las funciones se acortan. Es más seguro usar algo como:

foo instanceof FooClass

Pero tenga en cuenta que tiene que hacer esto en el componente/directiva porque instanceOf no está disponible en plantillas: 

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

// in your template
{{isFoo(maybeFoo)}}
 0
Author: Owen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-14 07:37:01