Question

<ul class="days">
    <liclass="day" *ngFor="let day of currentDays; let i = index"(click)="setStyle()">
        {{day}}
    </li> 
  </ul>

我的问题是，当我使用ngClass样式添加到所有元素时，如何将样式添加到列表中的指定元素？可以使用方法将传递引用添加到元素并设置样式吗？

Answer 1

您可以有条件地使用ngStyle进行设置。请参考以下代码。

<div [ngStyle]="{'background-color':isTrue === true ? 'green' : 'red' }"></<div>

或参考stackblitz链接以获取其他解决方案。

enter link description here

Answer 2

您可以使用

<li [class.your-class]="expression">

例如：

<li [class.mat-elevation-z10]="i === selectedElement">

或者您可以在表达式中使用ngClass

<li [ngClass]="{'first': true, 'second': true, 'third': false}">

其中first，second和third是您的类，而true，true，false是表达式。在上面的示例中，将应用第一类和第二类。

Answer 3

您可以为每个class设置不同的element

<ul class="days">
    <li *ngFor="let day of currentDays; let i = index" [class]="'day'+(index+1)">
        {{day}}
    </li> 
  </ul>

在css中将样式设置为每个样式：

.day1{
...
}

Answer 4

您可以将ngClass本身与条件一起使用。您可以使用变量替换RequiredDay字符串。

<ul class="days">
    <li [ngClass]="{'desiredClass':day === 'RequiredDay'}" *ngFor="let day of currentDays; let i = index" (click)="setStyle()">
       {{day}}
    </li> 
 </ul>

Angular ngFor li HTML元素集样式

4 个答案: