时间戳

首页 > 解决方案 > 如何以角度将默认类设置为*ngFor的第一个元素

angular - 如何以角度将默认类设置为*ngFor的第一个元素

问题描述

<ul class="nav flex-column">


  <ng-container *ngFor="let cat of Category"  >
    <span>{{change}}</span>
    <li class="nav-item">
        <a class="nav-link "  [class.bg]="temp===cat" (click)="clicked(cat)" href="#">{{cat}}</a>  
    </li>
  </ng-container>

</ul>

我有一个侧边栏，默认情况下我希望显示第一个带有活动类的 li 锚标记，然后当我单击其他 li 时我需要更改。我已经实现了后面的部分但是如何设置默认类

编辑：-

   <li class="nav-item"  [class.bg]="change === true && i==0 ">
        <a class="nav-link "  [class.bg]="temp===cat" (click)="clicked(cat)" href="#">{{cat}}</a>  
    </li>

我使用名为 change 的变量来检查是否未单击菜单并按照建议的索引变量 iPenggy确定第一个菜单项并且代码有效

但是我发现了另一件事，如果有人可以帮助我理解那就太好了

<a class="nav-link "  [class.bg]="temp===cat" [class.bg]="change === true && i==0 " (click)="clicked(cat)" href="#">{{cat}}</a>

上面的代码可以工作，但是如果您更改 [class.bg ] 语句的顺序，它就会停止工作 {{cat}} 上面的代码不起作用为什么会这样

标签： angular

解决方案

NgFor导出index变量，表示数组中当前元素的索引，请参阅doc。您只需要在ngFor表达式中声明它即可使用它。

 <ng-container *ngFor="let cat of Category; let i = index;"  >
   <span>{{change}}</span>
   <li class="nav-item" [ngClass]="{'active-class': i === 0}">
     <a class="nav-link "  [class.bg]="temp===cat" (click)="clicked(cat)" href="#">{{cat}}</a>  
   </li>
 </ng-container>

您还可以使用first由 导出的变量ngFor。

 <ng-container *ngFor="let cat of Category; let f = first;"  >
   <span>{{change}}</span>
   <li class="nav-item" [ngClass]="{'active-class': f}">
     <a class="nav-link "  [class.bg]="temp===cat" (click)="clicked(cat)" href="#">{{cat}}</a>  
   </li>
 </ng-container>

推荐阅读