Angular ngFor li html元素设置样式答案

【问题标题】：Angular ngFor li html element set styleAngular ngFor li html元素设置样式
【发布时间】：2018-11-29 15:09:51
【问题描述】：

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

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

【问题讨论】：

我认为您应该对所有内容都使用类，以便创建更改样式表中的内容的能力。话虽如此，根据给定迭代的属性，您可以为其分配一个特定的类或一组类。

标签： javascript css angular

【解决方案1】：

你可以使用

<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 是表达式。在上面的示例中，将应用第一类和第二类。

【讨论】：

【解决方案2】：

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

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

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

.day1{
...
}

【讨论】：

告诉更多帮助

【解决方案3】：

您可以在条件下使用 ngClass 本身。你可以用变量替换RequiredDay字符串。

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

【讨论】：

【解决方案4】：

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

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

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

enter link description here

【讨论】：