Question

<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的变量来检查菜单是否未被点击，并且Penggy建议的索引变量i来确定第一个菜单项并且代码正常工作

但我发现了另一件事，如果有人能帮助我理解它会很棒

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

上面的代码有效但如果你改变[class.bg]语句的顺序它会停止工作 {{猫}} 上面的代码不起作用为什么这个

Answer 1

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>

Answer 2

试试这个 -

<li class="nav-item">
        <a class="nav-link "  [ngClass]='{"bg": temp===cat}' (click)="clicked(cat)" href="#">{{cat}}</a>  
    </li>

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

2 个答案: