动态样式 css font-size ngFor angular 4 ionic 3

Question

我在很多论坛上搜索过，但仍然没有找到如何在 *ngFor 循环中动态更改字体大小的解决方案..

---

home.html

<span *ngFor="let quality of qualities | async">
    <button  [ngStyle]="{'font-size': quality.$key + 'px'}">{{quality.$key}} 
      : {{quality.$value}}</button>
</span>

home.ts

qualities :FirebaseListObservable<any>;

这是显示内容的图片：

我想将 font-size 的样式设置为与单词旁边的数字一样大。例如 : clever : 200 的大小应该是 200px。

当我检查 html 时，我得到：

<button ng-reflect-ng-style="[object Object]">intelligent : 5</button>

console.log（品质）和每个品质

所以肯定是ngFor的质量有问题，但不知道是什么

感谢您的帮助！

Answer 1

这是因为您传递的是 key 而不是 value，它会将其解释为 font-size: cleverpx。

尝试：

<span *ngFor="let quality of qualities | async">
  <button  [ngStyle]="{'font-size': quality.$value + 'px'}">{{quality.$key}} 
      : {{quality.$value}}</button>
</span>