角度2：如果值存在，請顯示html

Question

目前，我有一項服務可以從我編寫的許多API中提取值。 在模板中，如果將值饋入模板，則僅在結果中存在以下值或該值不為空時輸出以下html：

<li class="title rh-blue-lite-fg">{{ project.meta_header_one }}</li>

所以我試圖弄清楚如何在ngIf中包裝它，或者有其他方法可以做到這一點，以便只有當該值存在並且不為空時才輸出此“ li”項

Answer 1

我認為您可以使用ngIF指令來檢查project是否為null：

<li class="title rh-blue-lite-fg" *ngIf="project.meta_header_one">{{ project.meta_header_one }}</li>

Answer 2

角4+

使用Angular 4或更高版本（ 至少到Angular 6 ），可以將*ngIf與as關鍵字一起使用，將條件值存儲在這樣的變量中：

<div *ngIf="condition as value">{{value}}</div>

這樣，您就不必重復條件，如果表達式很長或包含要避免多次調用的方法調用，這將很有用。

應用於問題中的代碼段：

<li class="title rh-blue-lite-fg" *ngIf="project.meta_header_one as value">{{value}}</li>