为 *ngFor 中的每个元素添加样式答案

【问题标题】：Add Style to each element in *ngFor为 *ngFor 中的每个元素添加样式
【发布时间】：2019-01-21 07:25:27
【问题描述】：

我想为我的 *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>

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

【问题讨论】：

它正在被应用。请参阅此处的代码stackblitz.com/edit/…。你在用position: absolute 来设置样式吗？

标签： angular ngfor ng-style

【解决方案1】：

您的items 对象是什么样的？

我创建了这个模仿您的代码的 StackBlitz（我只是将 top 和 left 替换为 border 和 background-color 以便快速查看）：https://stackblitz.com/edit/angular-rdb9tr

它有效，所以我猜你的 items 对象中可能有错误...

【讨论】：

我的项目有3个属性，一个描述一个Y值和一个X值导出界面项目{描述：字符串，X：数字，Y：数字，}和当我编辑插值{{}} value 它显示正确的值

【解决方案2】：

我在 Stackblitz

上创建了一个演示

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

【讨论】：

【解决方案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>

【讨论】：