如何在离子中使用 ngFor 更改颜色？答案

【问题标题】：How to change color using ngFor in ionic?如何在离子中使用 ngFor 更改颜色？
【发布时间】：2022-01-24 09:22:36
【问题描述】：

我想使用 ngFor 更改列表中卡片的颜色。我也尝试过使用花括号作为属性。

    <ion-card *ngFor="let color of color_pallet">
    <ion-card-header>
      <!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle> -->
      <ion-card-title [ngStyle]="{'background':color }" style="color:#ffffff;">{{color}}
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
    </ion-card-content>
  </ion-card>

【问题讨论】：

请添加您的color_pallet 数组。
代码在我看来是正确的。

标签： angular ionic-framework ngfor

【解决方案1】：

你可以像这样用同样的 ngStyle 包裹你的文本颜色：

[ngStyle]="{ background: color, color: '#fff' }"

至于回答你的问题，我觉得很好 - 'color' 绝对是一个字符串吗？

您也不需要将 background 括在引号中 - 仅当它是带有连字符的样式选择器时，即 'text-decoration'

【讨论】：

【解决方案2】：

我的错误，我没有在卡片上应用颜色，而是在标题上应用颜色。刚才我发现我可以在我提到它的同一个标签上应用 ngFor。

<ion-card *ngFor="let color of color_pallet" [ngStyle]="{'background':color }">
    <ion-card-header>
      <ion-card-title style="color:#ffffff;">{{color}}
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
    </ion-card-content>
  </ion-card>

谢谢大家。

【讨论】：