为 *ngFor 中的每个元素添加 Style

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>

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

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 文档：

The styles are updated according to the value of the expression evaluation:

keys are style names with an optional .<unit> suffix (ie 'top.px', 'font-style.em'),

values are the values assigned to those properties (expressed in the given unit).

您可以找到完整的参考资料here

所以你修改后的代码应该是：

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

为 *ngFor 中的每个元素添加 Style

Add Style to each element in *ngFor

ng-style

ngfor

angular