Angular 4 如何应用动态样式？

Question

在Angular 4中，是否可以为ngFor重复的span元素应用动态的top和left值？

- Anna

---

是的，你想做什么？https://dev59.com/wlsW5IYBdhLWcg3wNE0q - user9112752

<span [style.top]="topvalue"></span> 其中 topvalue 是一个变量。 - suhailvs

[ngClass]="{'alert-card': hasError }" [ngClass]="{'alert-card': hasError }" - B.Habibzadeh

Answer 1

您可以使用：

1. 使用[style.anything]绑定，可以做一些简单的事情，例如：<span [style.color]="red"></span>，或者更复杂的事情，例如将一个变量（这里是progress）绑定到一个百分比（width）：[style.width.%]="progress"；
2. 使用[ngStyle]绑定，可以同时指定多个CSS属性，例如：<span [ngStyle]="{'color': 'red', 'font-weight': condition? 'bold':'300'}"></span>
3. 使用[className]绑定，可以动态应用CSS类名，例如：<span [className]="condition? 'redText': 'blueText'"></span>
4. 使用[ngClass]绑定，可以同时指定多个CSS类，就像ngStyle对于CSS属性一样，例如：<span [ngClass]="{'redText': condition1, 'blueText': condition2}"></span>

[ngClass]接收一个对象作为输入，并且仅在该对象的每个键对应的值为真时应用。

例如，如果你正在迭代数组items_array：

<span *ngFor="let i of items_array" 
    [ngClass]="{'redText': i.shouldBeRed, 'blueText': i.shouldBeBlue}">
  The span text
</span>

每个元素（i）的CSS类将是：

• 如果属性i.shouldBeRed的值为true（即：它是true，1，非空字符串或非null对象），则为redText；
• 如果属性i.shouldBeBlue的值为true，则为blueText；
• 如果两个属性的值都为true，则为redText blueText。

在您的情况下，我认为[ngStyle]可能是合适的。

<span *ngFor="let i of items_array" 
      [ngStyle]="{'top': expression1, 'left': expression2}">
    The span content
</span>

- Paolo Stefan