Cómo comprobar un objeto vacío en la plantilla angular 2 usando * ngIf


Quiero comprobar si mi objeto está vacío no renderizar mi elemento, y este es mi código:

<div class="comeBack_up" *ngIf="previous_info != {}">
   <a 
      [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]"
      >
        {{previous_info.title}}
   </a>
</div>

Pero mi código está mal, ¿cuál es la mejor manera de hacer esto?

Author: Alireza Valizade, 2016-05-09

4 answers

Esto debería hacer lo que quieras:

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

O más corto

<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">

Cada {} crea una nueva instancia y ==== la comparación de diferentes instancias de objetos siempre resulta en false. Cuando se convierten a cadenas === resultados a true

Ejemplo de émbolo

 52
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
2017-04-04 09:20:36

También podrías usar algo así:

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

Con el método isEmptyObject definido en su componente:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}
 22
Author: Thierry Templier,
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-06-08 07:04:09

Las respuestas anteriores están bien. Pero he encontrado una muy buena opción para usar lo siguiente en la vista:

{{previous_info?.título}}

Pregunta probablemente duplicada Angular2 - error si no comprueba si {{objeto.campo}} existe

 9
Author: Damiani,
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-23 12:34:30

Esto funcionó para mí:

Compruebe la propiedad length y use ? para evitar errores undefined.

Así que tu ejemplo sería:

<div class="comeBack_up" *ngIf="previous_info?.length">
 2
Author: Loke,
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-09-15 07:36:50