Question

我想为* ngFor

中的每个元素添加样式

<div class=greenBox *ngFor="let item of items;" 
  [ngStyle]="{ 
    'top': item.Y,
    'left': item.X
  }">
    {{item.description}}
  </div>

当我按照上面的代码进行操作时，仅显示设置了第一个元素样式：

<div class="greenBox ng-star-inserted" ng-reflect-ng-style="[object Object]" style="top: 0px; left: 0px;"> 0 </div>
<div class="greenBox ng-star-inserted" ng-reflect-ng-style="[object Object]"> 1 </div>
<div class="greenBox ng-star-inserted" ng-reflect-ng-style="[object Object]"> 2 </div>
<div class="greenBox ng-star-inserted" ng-reflect-ng-style="[object Object]"> 3 </div>

我希望每个元素都有一个style属性。

Answer 1

您的items对象是什么样的？

我创建了一个模仿您的代码的StackBlitz（我将top和left分别替换为border和background-color以进行快速的视觉检查）：https://stackblitz.com/edit/angular-rdb9tr

它有效，所以我猜测您的items对象中可能存在错误...

Answer 2

我已在 Stackblitz

上创建了一个演示

 <div class="greenBox" *ngFor="let item of items;" 
  [ngStyle]="{         
    'top.px': item.y,
    'left.px': item.x
  }">
    {{item.description}}
  </div>

Answer 3

根据Angular文档：

样式会根据表达式求值的值进行更新：


键是样式名称，带有可选的.<unit>后缀（即'top.px'，'font-style.em'），

值是分配给这些属性的值（以给定的单位表示）。

您可以找到完整的参考文献here

因此，您修改后的代码应为：

<div class=greenBox *ngFor="let item of items;" 
    [ngStyle]="{'top.px': item.Y, 'left.px': item.X}">
        {{item.description}}
</div>

向* ngFor中的每个元素添加样式

3 个答案: