如何在ion-card中通过ngStyle用渐变背景色替代纯色

1. 更新classlist.page.ts中的背景色数组及循环逻辑 #

把原来的纯色数组替换成指定的渐变样式，同时调整循环的重置条件（当前仅3种渐变）：

// 替换原classBackgroundColor数组
classBackgroundColor = [
  "linear-gradient(to right top, #ff8008, #ff930d, #ffa619, #ffb727, #ffc837)",
  "linear-gradient(to right top, #1d976c, #40af7f, #5cc792, #78e0a5, #93f9b9)",
  "linear-gradient(to right top, #eb3349, #ee3f47, #f04946, #f25344, #f45c43)",
];

// 循环赋值部分调整重置条件
if (courses && courses.length > 0) {
  let i = 0;
  this.classes = courses;
  this.reorderList = [];
  this.classes.forEach((course) => {
    course.backgroundColor = this.classBackgroundColor[i];
    i++;
    // 数组仅3项，i等于3时重置为0
    if (i == 3) i = 0;
  });
} else {
  this.noDataFound = this.lang.no_class_found;
  this.classes = [];
  this.reorderList = [];
}

2. 修改classlist.page.html中的ngStyle绑定属性 #

渐变通过background-image属性生效，因此将原绑定的background改为background-image：

<ion-card
*ngFor="let course of classes"
class="cards-description"
[ngStyle]="{'background-image': course.backgroundColor}"
(click)="openClassStudents(course)"
>
</ion-card>

完成以上修改后，所有卡片会循环使用指定的三种渐变背景。

内容的提问来源于stack exchange，提问作者Q8Xbox