试图获得 style="margin-left:{{data}};"去工作

【问题标题】：Trying to get style="margin-left:{{data}};" to work试图获得 style="margin-left:{{data}};"去工作
【发布时间】：2017-10-24 03:54:45
【问题描述】：

index.ts
bubbles: any [][] = [['80%','Meeting'],['20%','Meeting']]

index.html
<div *ngFor="let bubble of bubbles">
      <div class="bubble" style="margin-left:{{bubble[0]}};">
      </div>
</div>

我正在尝试让 margin-left 样式使用数组 bubbles[0] 中的数据。

for 循环在该布局中给出 ['80%','Meeting'] ，因此我尝试将该数组的 0 元素设置为 margin-left 样式，但这不起作用。有没有其他方法来完成这个过程？

【问题讨论】：

标签： html css angular margin ngfor

【解决方案1】：

使用[ngStyle] 而不是style。文档here。

<div class="bubble" [ngStyle]="{'margin-left': bubble[0]}">

【讨论】：

我收到此错误：解析器错误：绑定表达式不能在表达式末尾包含链式表达式 [{'margin-left': bubble[0]};]
@ThomasY 抱歉，我们必须从表达式末尾删除 ;。
@ThomasY 使用, 拆分它们，例如{'attr1': xx, 'attr2': yy}。

【解决方案2】：

除了@Pengyy的回答，你还可以用

<div class="bubble" [style.margin-left]="bubble[0]">

【讨论】：