时间戳

首页 > 解决方案 > 基于 router.url 匹配 Angular 向 ngFor 循环中的一个元素添加一个类

angular - 基于 router.url 匹配 Angular 向 ngFor 循环中的一个元素添加一个类

问题描述

这是一个进度时间线，如果用户在当前章节，class="bar" 的宽度需要更改。如果 id 与当前 router.url 匹配，我需要向 bar 类添加一个活动类。

下面是标记。

<div class="progress-container" >
    <div [id]="chapter.slug" class="bar" [class.active]="active" [routerLink]="'/'+ chapter.slug" *ngFor="let chapter of chapters; let i = index;">
        <div class="fill"></div>
        <p>{{i + 1}}</p>

        <div class="question-dots">
            <a href="" [routerLink]="'/'+chapter.slug+'/'+question.slug" *ngFor="let question of questions"></a>
        </div>
    </div>
</div>

在我的 component.ts 文件中，我使用如下 if 语句将 active 设置为 true：

    for(let i = 0; i < this.chapters.length; ++i)
      {

        console.log(this.router.url.indexOf(this.chapters[i].slug) > -1);
        if(this.router.url.indexOf(this.chapters[i].slug) > -1){
            this.active = true;
        }

      }

但是，这会将活动类添加到 for 循环内的所有元素中。如何将类添加到仅与路由器 url 匹配的 1 元素？

标签： angularngfor

解决方案

您可以设置类，[ngClass]="getBarClass(i)"其中 wheregetBarClass是组件中的一个函数，该函数获取索引并返回类列表，['bar']或者['bar', 'bar-active']基于索引。然后你可以将你需要的任何东西应用到bar-active课堂上。

检查NgClass 文档。

推荐阅读