Как проверить пустой объект в шаблоне angular 2, используя * ngIf

Я хочу проверить, пуст ли мой объект, не меняет ли мой элемент, и это мой код:

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

но мой код неправильный, что лучший способ сделать это?

Ответы

Ответ 1

Это должно делать то, что вы хотите:

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

или короче

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

Каждый {} создает новый экземпляр, а ==== сравнение экземпляров разных объектов всегда приводит к false. Когда они преобразуют в строки === результаты в true

Пример плунжера

Ответ 2

Вы также можете использовать что-то вроде этого:

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

с помощью метода isEmptyObject, определенного в вашем компоненте:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}

Ответ 3

Над ответами все в порядке. Но я нашел действительно хороший вариант использовать следующие в представлении:

возможно дублированный вопрос Angular2 - ошибка, если не проверить, существует ли {{object.field}}

Ответ 4

Из приведенных выше ответов следующие не сработали или менее предпочтительны:

(previous_info | json) != '{}' работает только для пустого кейса {}, но не для кейса null или undefined
Object.getOwnPropertyNames(previous_info).length также не работал, так как Object не доступен в шаблоне
Я не хотел бы создавать выделенную переменную this.objectLength = Object.keys(this.previous_info).length !=0;
Я не хотел бы создавать выделенную функцию
```
isEmptyObject(obj) {
   return (obj && (Object.keys(obj).length === 0));
}
```

Решение: keyvalue pipe вместе с ?. (оператор безопасной навигации); и это кажется простым.

Он хорошо работает, когда previous_info = null или previous_info = undefined или previous_info = {}, и воспринимается как ложное значение.

<div  *ngIf="(previous_info | keyvalue)?.length">

keyvalue - преобразует объект или карту в массив пар ключ-значение.

?. - Оператор безопасной angular навигации (?.) - это удобный и удобный способ защиты от нулевых и неопределенных

Ответ 5

Это сработало для меня:

Проверить свойство length и использовать ? чтобы избежать undefined ошибок.

Итак, ваш пример будет:

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

ОБНОВИТЬ

Свойство length существует только для массивов. Поскольку вопрос был об объектах, используйте Object.getOwnPropertyNames(obj) чтобы получить массив свойств из объекта. Пример становится:

<div class="comeBack_up" *ngIf="previous_info  && Object.getOwnPropertyNames(previous_info).length > 0">

previous_info && добавлена, чтобы проверить, существует ли объект. Если он оценивается как true следующий оператор проверяет, есть ли у объекта хотя бы пропортия. Он не проверяет, имеет ли свойство значение.

Ответ 6

Просто для удобства чтения созданная библиотека ngx-if-empty-or-has-items будет проверять, не является ли объект, набор, карта или массив не пустыми. Может быть, это кому-нибудь поможет. Он имеет ту же функциональность, что и ngIf (тогда поддерживается синтаксис else и as).

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>

Ответ 7

Немного более длинный путь (если это интересно):

В вашем машинописном коде сделайте это:

this.objectLength = Object.keys(this.previous_info).length != 0;

И в шаблоне:

ngIf="objectLength != 0"