ionic4 - 使用 svg 作为 src 更改离子图标颜色

Question

我有 5 个离子图标，我使用它们从 1 到 5 进行评分，并且我根据我选择的值/图标动态地将它们的颜色从 1 更改为 5。它与名称完美搭配，但是当我在 ion-icon 中使用 src 到 svg 文件时，ng-Style 对我不起作用，你能帮我吗？

谢谢

HTML：

<ion-icon src="assets/imgs/nnnn.svg" *ngFor="let num of [1,2,3,4,5]" (click)="rate(num)"
    [ngStyle]="{'color':getColor(num)}">
</ion-icon>

TS：

async rate(index: number) {
    ........
    this.rating = index;
    .......
}

getColor(index: number) {
    enum COLORS {
      RED    = "#FE1704",
      WHITE  = "#FFFFFF",
      YELLOW = "#FCFC17",
      GREY   = "#F7F4F4",
      GREEN  = "#04B404"          
    }
    switch (this.rating) {
      case 1:
        return COLORS.RED;
      case 2:
        return COLORS.WHITE;
      case 3:
        return COLORS.YELLOW;
      case 4:
        return COLORS.GREY;
      case 5:
        return COLORS.GREEN;
      default:
        return COLORS.GREEN;
    }
  }

标签： ionic4