隐藏在angular 2版本6中不起作用

我有一个具有[隐藏]属性的div，但它似乎不起作用。理想情况下，当cartItems数组为空时，我希望div不显示，但这不起作用。作为补充说明，我也在使用bootstrap

我的代码：

<div [hidden]="cartItems.length < 1">
    <h4 class="padding-nine">Define Extent</h4>
        <div class="border-five">
          <app-esri-map 
             id="cartMap"
             basemap="cartMap.mapOptions"
             center="cartMap.mapOptions"
             zoom="cartMap.mapOptions"
             height="300px"
             width="100%">
          </app-esri-map>
       </div>
 </div>

定义范围

---

div中的项根本不会隐藏。没有错误。

因此，环顾四周，我发现我需要在.scss文件中定义隐藏属性，因此我在最后添加了：

[hidden] {
    display: none !important;
}

---

@jonrsharpe是对的-使用[hidden]效果很好，我不想摆脱在特定情况下隐藏它所需的dom。不使用hidden，您可以使用[style.display]=“cartinems.length1”