如何在html代碼中添加多個三元運算子？

讓我們考慮一下我有以下代碼：它曾經將 css 類應用到red4，但我需要將 css 類應用到red11并且 myData 有大小，我希望這個大小是動態的方式。例如：大小將具有動態數字范圍，0 - 20 // 0 - 100 // 0 - 10000 等。顏色范圍應取決于動態大小范圍。

HTML：

<svg><path *ngFor="let item of myData" [attr.class]="item.myColor=='red1'?'red1':item.myColor=='red2'?'red2':item.myColor=='red3'?'red3':item.myColor=='red4'?'red4':null"></path>
</svg>

這是我的 CSS 課程：

svg path.red1 {
    cursor: pointer;
    fill: #ffcccc;
}
svg path.red2 {
    cursor: pointer;
    fill: #ffb3b3;
}
svg path.red3 {
    cursor: pointer;
    fill: #ff9999;
}
svg path.red4 {
    cursor: pointer;
    fill: #ff6666;
}
svg path.red5 {
    cursor: pointer;
    fill: #ff4d4d;
}
svg path.red6 {
    cursor: pointer;
    fill: #ff3333;
}
svg path.red7 {
    cursor: pointer;
    fill: #ff1a1a;
}
svg path.red8 {
    cursor: pointer;
    fill: #ff0000;
}
svg path.red9 {
    cursor: pointer;
    fill: #e60000;
}
svg path.red10 {
    cursor: pointer;
    fill: #cc0000;
}
svg path.red11 {
    cursor: pointer;
    fill: #b30000;
}

這是一個打字稿代碼：

export interface DataInterface {
  id: string;
  title: string;
  size: number;
  myColor: string;
  myCheck: string;
  d: string;
  class?: string;
}
myList = [{ "id": "SG-05", "size": 30, }, { "id": "SG-04", "size": 9, }, { "id": "SG-01", "size": 20, }];

myData: DataInterface[] = [
  {
    "id": "SG-01", "size": 20, "myColor": "default", "myCheck": 'false'
  },
  {
    "id": "SG-02",  "size": 20, "myColor": "default", "myCheck": 'false', 
  },
  {
    "id": "SG-03", "size": 20, "myColor": "default", "myCheck": 'false', 
  },
  {
    "id": "SG-04",  "size": 40, "myColor": "default", "myCheck": 'false', 
  },
  {
    "id": "SG-05",  "size": 70, "myColor": "default", "myCheck": 'false',
  },
]

fillColor() {
  for (let i = 0; i < this.myData.length; i  ) {
    let myCountry = this.myData[i].id;
    for (let j = 0; j < this.myList.length; j  ) {
      if (myCountry === this.myList[j].id) {
        this.myData[i].size = this.myList[j].size;
        if (myCountry === this.myList[j].id && this.myList[j].size <= 0) {
          this.myData[i].myColor = 'red1';
        }
        else if (myCountry === this.myList[j].id && this.myList[j].size <= 10) {
          this.myData[i].myColor = 'red2';
        }
        else if (myCountry === this.myList[j].id && this.myList[j].size <= 20) {
          this.myData[i].myColor = 'red3';
        }
        else if (myCountry === this.myList[j].id && this.myList[j].size <= 30) {
          this.myData[i].myColor = 'red4';
        }
      }
    }
    console.log('$$$$$$$$$$2', this.myData);
  }
}

任何幫助，將不勝感激！謝謝你。

uj5u.com熱心網友回復：

還

[ngClass]="item.myColor"

順便說一句，您可以通過

this.myData.forEach((x:any)=>{
  const country=this.myList.find(l=>l.id==x.id)
  if (country)
  {
       x.size=country.size;
       x.myColor='red' (Math.floor(country.size/10) 1)
  }
})

使用forEach和find陣列的方法

uj5u.com熱心網友回復：

由于item.myColor回傳顏色名稱，您可以設定
[attr.class] = "item.myColor ? item.myColor : null"

標籤：html css 有角度的 打字稿 svg

上一篇：如何執行否定環視搜索

下一篇：單擊其中一個SVG部件以顯示影像