动态样式 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>;

这是显示的图片：

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

当我检查 html 时，我得到：

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

console.log(qualities) 和每个质量

那么肯定是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>