javascript - isempty - Cómo verificar el objeto vacío en la plantilla angular 2 usando*ngIf

isempty angular 6

Question

Quiero verificar si mi objeto está vacío. No renderice 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 es incorrecto, ¿cuál es la mejor manera de hacer esto?

Answer 1

Esto debería hacer lo que quieras:

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

o mas corto

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

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

Ejemplo de plunker

Answer 2

Esto funcionó para mí:

Compruebe la propiedad de la length y el uso ? para evitar errores undefined .

Entonces tu ejemplo sería:

<div class="comeBack_up" *ngIf="previous_info?.length">

Answer 3

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

{{previous_info? .title}}

probablemente la pregunta duplicada Angular2: error si no se comprueba si existe {{object.field}}

Answer 4

Solo por legibilidad, la biblioteca creada ngx-if-empty-or-has-items comprobará si un objeto, conjunto, mapa o matriz no está vacío. Tal vez ayude a alguien. Tiene la misma funcionalidad que ngIf (entonces, else y ''as'' se admite la sintaxis).

arrayOrObjWithData = [''1''] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

Answer 5

También puedes 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));
}