Angular: 如何根据条件更改 Font Awesome 图标和文本

Question

component.html

<i [title]="CardData.quantity > 1 || _ShippingVariable > 1 ? CannotShip : FreeShipping" 
   [ngClass]="{'fa': true,'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',}">
</i>

ShippingVairable 来自 component.ts

所以我想要做的是 _ShippingVariable=0 然后我会得到“（CrossFontAwesomeIcon）CannotShip：它应该是红色的”。如果 _ShippingVariable=1 那么我将得到 (CheckFontAwesomeIcon)FreeShipping:It should be in green color".

并请任何资源 material 或教程，我可以清除我的 Angular NgClass 因为我想根据条件动态更改 CSS。

提前问候

Answer 1

你可以这样做而不是 [ngClass]

//  Your way
<i [title]="CardData.quantity > 1 || _ShippingVariable > 1 ? CannotShip : FreeShipping" 
   [ngClass]="{'fa': true,'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',}">
</i>

// My suggestion
<i [title]="CardData.quantity > 1 || _ShippingVariable > 1 ? CannotShip : FreeShipping" 
   [class.fa-youtube]="socialMediaLink.socialMediaType === 'YOUTUBE'"
   class="fa" // Seems like you always want this class so dont put that in conditions
>
</i>

Answer 2

简单理解：看这个

// In component.ts file lets say you have 2 boolean flags
boolFlag1: boolean = true;
boolFlag2: boolean = false;

// In HTML / CSS you can have any class

// You want a class 'class-1' to be present all the times, 'class-2' to be present when boolFlag1 is true and 'class-3' when boolFlag2 is true

Then you can do something like this

<div 
   class="class-1" // This class will be present at all times irrespective of the conditions
  [class.class-2]="boolFlag1" // Class2 will be applied when boolFlag1 is true
  [class.class-3]="boolFlag2" // Class3 will be applied when boolFlag2 is true
>
</div>

// In the above example, class-3 will not be applied since i made boolFlag2 to be false

Answer 3

Srikar Phani Kumar Marti 弟兄现在我知道了 [class] 和 [ngClass] 感谢您的帮助，我这样做了

 <i 
      [class.text-success]="CardData.quantity > 1 || _ProductQuantity > 1"
      [ngClass]="{'fa': true,'far fa-check-square': CardData.quantity > 1 || 
 _ProductQuantity > 1, 'far fa-times-circle': CardData.quantity < 1 || 
 _ProductQuantity < 1}"
      [class.text-danger]="CardData.quantity < 1 || _ProductQuantity < 1"
      >
      {{CardData.quantity < 1 || _ProductQuantity < 1 ? "Cannot
      Ship" : "Free
      Shipping"}}
      </i>

///// By Srikar

// Please remember you can do this too to keep the HTML clean and neat.

// in component.ts file, create a variable for the classes

conditionalClasses = {
     'fa': true,
     'far fa-check-square': CardData.quantity > 1 || _ProductQuantity > 1, 
     'far fa-times-circle': CardData.quantity < 1 || _ProductQuantity < 1
}

// in HTML file, you can do this too! 
<i 
    [class.text-success]="CardData.quantity > 1 || _ProductQuantity > 1"
    [ngClass]="conditionalClasses"
    [class.text-danger]="CardData.quantity < 1 || _ProductQuantity < 1"
>
    {{
       (CardData.quantity < 1 || _ProductQuantity < 1) 
          ? "Cannot Ship" 
          : "Free Shipping"
    }}
</i>

Answer 4

Borther A我还需要一点帮助：

在我的 component.ts

       CardData=2;
      _ProductQuantity=2;
       Style1={
       fontSize: '3em',
       backgroundColor: 'ivory',
       color: 'CardData.quantity < 1 || _ProductQuantity < 1 ? "maroon" : "red"',

      };

 <i class="box" [ngStyle]="Style1">My style</i>

现在兄弟我想改变我的颜色或任何样式，条件是我写了这样的条件

 color: 'CardData.quantity < 1 || _ProductQuantity < 1 ? "maroon" : "red"',

但是它不起作用我怎么能这样做因为我不知道语法。

Angular: 如何根据条件更改 Font Awesome 图标和文本

Angular: How May I change Font Awesome icon and Text on condition

typescript

ng-class

angular