Angular ngFor li HTML 元素设置样式

Question

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

我的问题是如何在列表中精确指定元素，并为其添加样式，当我使用ngClass时，样式将被添加到所有元素中？是否可以通过方法添加引用来传递元素并设置样式？

- Wojciech Abacki

---

我认为你应该使用类来创建能够更改样式表的能力。话虽如此，基于给定迭代的属性，你可以为其分配特定的类或一组类。 - Fallenreaper

Answer 1

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

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

或者参考StackBlitz链接获取另一种解决方案。

点击此处

- Piper

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是表达式。在上面的例子中，first和second类都会被应用。

- DevEng

Answer 3

您可以为每个元素设置不同的类

<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>

- Pavankumar Shukla