*ngStyle 让可视化消失

Question

我正在尝试在 Angular 网络应用程序中显示项目列表。我有一个列表组件，其中包含用于显示每个列表项组件的相关 *ngFor 指令。在列表项组件的 HTML 中，我定义了以下结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="item">
  <div class="content font-weight-bold" style="width: 250px; height: 180px" *ngStyle="{'opacity': 
   (object.booleanValue) ? 1.0 : 0.5}">
    <div class="someActualContent">
      <div>{{object.text}}</div>
      ....
    </div>
  </div>
</div>

在我添加 *ngStyle-directive 之前，对象的显示工作正常（所有信息都正确显示）。然后，不再有任何元素可见。但是，在检查模式下，我可以看到所有列表项实际上都在那里 - 它们是不可见的，并且比我在 div 中定义的 style="..." 中定义的要小。编译成功。

我尝试了 object.booleanValue==true 但这并没有带来任何改变。

有人有解释吗？提前致谢！

Answer 1

将 ngStyle 指令括在方括号中，而不是微语法符号 *ngStyle。尝试以下

<div 
  class="content font-weight-bold" 
  style="width: 250px; height: 180px" 
  [ngStyle]="{'opacity': (object.booleanValue) ? 1.0 : 0.5}"
>
  ...
</div>

*ngStyle 让可视化消失

*ngStyle makes visualization disappear

html

ng-style

angular