我正在尝试使用 ngFor 在引导选项卡上循环，

Posted 2023-05-08

【中文标题】我正在尝试使用 ngFor 在引导选项卡上循环，

【英文标题】：I'm trying to loop on bootstrap tabs with ngFor,

【发布时间】：2020-10-23 15:39:33

【问题描述】：

它会显示所有选项卡，因为活动类也是循环的，我如何默认只显示第一个选项卡 但是，导航选项卡工作正常。 我需要的是： 使用每个活动导航链接的活动类循环选项卡窗格

HTML

<section id="new-recipes">
  <div class="recipes-title">
    <h1>NEW RECIPES</h1>
  </div>
  <div class="recipe-tabs">
    <div class="row">
      <div class="col-sm-2">
        <div
          class="nav flex-column nav-pills"
          id="v-pills-tab"
          role="tablist"
          aria-orientation="vertical"
        >
          <a
            class="nav-link"
            *ngFor="let tab of sections.recipes"
            id="v-pills-home-tab"
            data-toggle="pill"
            href="#v-pills- tab.id "
            role="tab"
            aria-controls="v-pills-home"
            aria-selected="true"
            > tab.category.title 
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="recipe-body">
    <div class="row h-100">
      <div class="col-12">
        <div
          class="tab-content h-100"
          id="v-pills-tabContent"
          *ngFor="let recipe of sections.recipes"
        >
          <div
            class="tab-pane h-100 fade show active"
            id="v-pills- recipe.id "
            role="tabpanel"
            aria-labelledby="v-pills-home-tab"
          >
            <div class="row no-gutters h-100">
              <div class="col-sm-3">
                <div class="recipe-description">
                  <h4> recipe?.title </h4>
                  <p
                    class="text-white e2e-inner-html-bound"
                    [innerHTML]="recipe.description"
                  ></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

请创建一个 stackblitz 链接

【参考方案1】：

在*ngFor 循环中，您可以访问多个变量，例如奇数、偶数、最后、第一和索引，而您可以引用first 的值以添加@987654323 @class 只到第一个 div，正如你所问，使用 div 或药丸上的 ngClass 指令，如下所示：

<div class="tab-content h-100"
     id="v-pills-tabContent"
     *ngFor="let recipe of sections.recipes; let first = first;">
          <div id="v-pills- recipe.id "
               role="tabpanel"
               aria-labelledby="v-pills-home-tab"
               class="tab-pane h-100 fade show"
               [ngClass]="'active': first">

然而， 如果预期的实现是拥有一组用户可以切换的药丸，那么通过以这种方式定位 first 元素来设置 active 类将不会实用，因为即使用户选择另一个药丸，第一个药丸也会始终保留 active 类。

如果您希望 active 类根据用户选择动态更改，您可以执行以下操作作为替代实现：

首先，在您的组件中创建一个属性，用于根据用户选择跟踪活动的index，并使用*ngFor 循环中的第一个index 的值初始化该属性为0，就像这样：

public activePillIndex:number = 0;

然后，在组件中编写一个函数，用于更改activePillIndex 的值以匹配用户选择的药丸的index，如下所示：

public selectPill(index:number) 
 this.activePillIndex = index;
 // do some other stuff if necessary...

最后，在您的模板中：

引用index 以确定它是否与所选药丸匹配，该药丸将存储在activePillIndex 属性中，以便[ngClass] 相应地添加active 类。

并使用(click) 事件调用selectPill() 函数，该函数旨在跟踪随后选择的药丸的index，如下所示：

<div class="tab-content h-100"
         id="v-pills-tabContent"
         *ngFor="let recipe of sections.recipes; let index = index;">
              <div id="v-pills- recipe.id "
                   role="tabpanel"
                   aria-labelledby="v-pills-home-tab"
                   class="tab-pane h-100 fade show"
                   [ngClass]="'active': index === activePillIndex"
                   (click)="selectPill(index)">

假设 *ngFor 循环中第一个元素的 index 值将是 0，[ngClass] 将在实例化组件时将 active 类应用于第一个元素，随后 @987654352 @ 事件将导致[ngClass] 指令将active 类设置为选定的药丸，并相应地从先前选择的药丸中删除active 类。

【参考方案2】：

我正在做类似的事情，我已经想出了这个解决方案，希望有人能帮助你

<section id="new-recipes">
    <div class="recipes-title">
        <h1>NEW RECIPES</h1>
    </div>
    <div class="recipe-tabs">
        <div class="row">
            <div class="col-sm-2">
                <div class="nav nav-tabs" id="v-pills-tab" role="tablist">
                    <a class="nav-link" *ngFor="let tab of HEROES; let index = index;" id="v-pills-home-tab" data-toggle="pill"
                        href="#v-pills- tab.id " role="tab" aria-controls="v-pills-home" aria-selected="true"
                        [ngClass]="'active': index === activePillIndex"
                        (click)="selectPill(index)">
                        tab.name 
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="recipe-body">
        <div class="row h-100">
            <div class="col-12">
                <div class="tab-content h-100" id="v-pills-tabContent" *ngFor="let recipe of HEROES; let index = index;">
                    <div class="tab-pane h-100 fade show active" id="v-pills- recipe.id " role="tabpanel"
                        aria-labelledby="v-pills-home-tab">
                        <div class="row no-gutters h-100">
                            <div class="col-sm-3">
                                <div class="recipe-description" *ngIf="activePillIndex === index">
                                    <h4> recipe?.id </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

ts

HEROES = [
     id: 1, name: "Superman" ,
     id: 2, name: "Batman" ,
     id: 5, name: "BatGirl" ,
     id: 3, name: "Robin" ,
     id: 4, name: "Flash" 
  ];

public activePillIndex:number = 0;



public selectPill(index:number) 
    this.activePillIndex = index;