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

Question

我有一个具有[hidden]属性的div，它似乎不起作用。理想情况下，当 cartItems 数组为空时，我希望div不显示，但是不起作用。附带说明一下，我也在使用引导程序。

我的代码：

<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中的项目根本不会隐藏。而且没有错误。

Answer 1

所以环顾四周，我发现我需要在.scss文件中定义hidden属性，因此我在结尾处添加了所有方法：

[hidden] {
    display: none !important;
}