Angular ngStyle 可以取多個 function 嗎？ 如果沒有，解決方法是什么？

Question

使用 ngStyle，你能為多個屬性添加多個條件嗎？

我需要根據某個 JSON 值更改文本顏色和背景顏色。

背景資料：

我正在努力制作一個類似於瀏覽器的標簽欄。 在每個選項卡中都有一個header/title和subheader 。 子標題的樣式根據選項卡/數組數據而變化。 這是標簽欄設計的樣子：

我專注於 Subheader 樣式、Planning 和 FPE 樣式。

這是我的選項卡數組的樣子：

 tabs = [
    {
      flightName: "Flight 1",
      stagePhase: "PRE-FPE",
      control: "View Only"
    },
    {
      flightName: "Flight 2",
      stagePhase: "PLANNING",
      control: "Plan and Load"
    },
    {
      flightName: "Flight 3",
      stagePhase: "PLANNING",
      control: "Closeout"
    },
    {
      flightName: "Flight 4",
      stagePhase: "FPE",
      control: "View Only"
    }
  ];

如果tabs.tab.control屬性為"View Only" ，那么background-color將是透明的， "Plan and Load" ：淺灰色， "Closeout" ：白色，然后還將文本顏色更改為深色。

因此，單獨的背景顏色 ngStyle function 可以看起來像：（打字稿）

getBgColor(control) {
  switch (control) {
    case 'View Only':
      return '#ffcccc00';
    case 'Editing':
      return '#cce6ff44';
    case 'Closeout':
      return 'white';
  }
}

這是 HTML：（關注 ngStyle）

<ul class="tabs" id="tabsList" *ngFor="let tab of tabs">
    
    <li>
      <a href="javascript:void(0)" class="flight-title"> {{ tab.flightName }} </a>
      <a [ngStyle]="{'background': getBackColor(tab.control) }" class="stage"> {{ tab.stagePhase }}
      </a>
      <em (click)="closeTab(tabs.indexOf(tab))" class="close-icon"> </em>
    </li>
</ul>

問題：

現在對於第二個<a>標記，我想調用 2 個函數：getBgColor() 和 getTxtColor()。 但是簡單地添加另一個 function 是行不通的：

<a [ngStyle]="{'background': getBgColor(tab.control)}, {'color': getTxtColor(tab.control) }" class="stage"> {{ tab.stagePhase }}
      </a>

加上額外的 function：

getTxtColor(control) {
    switch (control) {
      case 'View Only':
        return 'white';
      case 'Plan and Load':
        return 'white';
      case 'Closeout':
        return 'black';
    }
  }

我不能執行這兩個功能，它們需要返回，我有什么選擇？

Answer 1

[ngStyle] 接受 object，因此您的 function 可以返回具有屬性“顏色”和“背景”的 object。

getStyle(control)
{
  if (control=="View Only")
     return { "background-color":"#ffcccc00",color:"white"}

  ...
}

查看該屬性是否有-我們使用引號

順便說一句，為什么不在您的選項卡中添加屬性“樣式”？

tabs = [
    {
      flightName: "Flight 1",
      stagePhase: "PRE-FPE",
      control: "View Only",
      style:{ "background-color":"#ffcccc00",color:"white"}
    },
    {
      flightName: "Flight 2",
      stagePhase: "PLANNING",
      control: "Plan and Load"
      style:{ color:"white"}
    },
    {
      flightName: "Flight 3",
      stagePhase: "PLANNING",
      control: "Closeout",
      style:{ "background-color":"white",color:"#ffcccc00"}
    },
    {
      flightName: "Flight 4",
      stagePhase: "FPE",
      control: "View Only"
      style:{ "background-color":"#ffcccc00",color:"white"}
    }
  ];

Answer 2

NgStyle確實允許使用多個函數。 但它們只需要在一組括號內。

嘗試只使用一對括號{} ：

[ngStyle]="{'background': getBgColor(tab.control), 'color': getTxtColor(tab.control) }"