如何使用 *ngIf 檢查 Angular 2 模板中的空對象

Question

我想檢查我的對象是否為空，不要渲染我的元素，這是我的代碼：

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

但是我的代碼是錯誤的，最好的方法是什么？

Answer 1

這應該做你想要的：

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

或更短

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

每個{}創建一個新實例，並且====不同對象實例的比較總是導致false 。 當它們轉換為字符串時===結果為true

Plunker 示例

Answer 2

根據上述答案，以下內容不起作用或不太可取：

• (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)); }

---

解決方案：鍵值管道以及？。 （安全航行操作員）； 看起來很簡單。

當previous_info = null或previous_info = undefined或previous_info = {}並視為假值時，它運行良好。

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

keyvalue - 將 Object 或 Map 轉換為鍵值對數組。

?. - Angular 安全導航運算符 (?.) 是一種防止 null 和 undefined 的流暢且方便的方法

演示： 使用 angular 9 進行演示，盡管它也適用於以前的版本

Answer 3

你也可以使用類似的東西：

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

使用組件中定義的isEmptyObject方法：

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

Answer 4

上面的答案都可以。 但我發現了一個非常好的選項，可以在視圖中使用以下內容：

{{previous_info?.title}}

可能重復的問題Angular2 - 如果不檢查 {{object.field}} 是否存在則錯誤

Answer 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 ，則下一條語句檢查對象是否至少具有比例。 它不檢查屬性是否具有值。

Answer 6

有點長的方式（如果有興趣的話）：

在您的打字稿代碼中執行以下操作：

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

在模板中：

ngIf="objectLength != 0"

Answer 7

只是為了可讀性，創建庫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>