下面這段代碼，迭代items集合元素中每一個item，當且僅當item.id不為false時，才在頁面顯示item.name的屬性值。

如果item.id為空，最后渲染的頁面里會出現空的div, 這是該解決方案的一個小缺陷。

在一個復雜的Angular應用里，div嵌套層數如果增多，會給css樣式的應用帶來額外的工作量。

這時我們可以選擇使用ng-container而不是div，因為前者和div同樣具有HTML元素容器的作用，但優于div的一點是，ng-container不會影響到styles或者頁面布局(layout), 因為它根本不會出現在最終的html原生代碼中。

用ng-container重寫我們的代碼：

最后生成的HTML代碼里，不再有多余的empty div了：

什么時候用ng-container？

We should use when we just want to apply multiple structural directives without introducing any extra element in our DOM.

當需要使用多個structual指令而又不想使用額外的div元素時，可以考慮ng-container.

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular ng-container元素的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。