我正在嘗試使用 ngFor 在引導選項卡上循環，

Question

我正在嘗試使用 ngFor 在引導選項卡上循環，它會顯示所有選項卡，因為活動的 class 也被循環，我如何默認只顯示第一個選項卡但是，導航選項卡工作正常。 我需要的是：為每個活動的導航鏈接使用活動的 class 循環選項卡窗格

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>

Answer 1

在*ngFor循環中，您可以訪問幾個變量，如奇數、偶數、最后一個、第一個和索引，而您可以引用first的值，以便將active的 class 僅添加到第一個 div，如您所問，使用ngClass div或 pill 上的指令，如下所示：

<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的 class 是不切實際的，因為第一個葯丸將始終保留active的 class，即使用戶選擇另一個。

如果您希望active的 class 根據用戶選擇動態更改，則可以執行以下操作作為替代實現：

首先，在組件中創建一個屬性，用於根據用戶選擇跟蹤活動index ，並使用*ngFor循環中第一個index的0初始化該屬性，如下所示：

public activePillIndex:number = 0;

然后，在組件中編寫 function 來更改activePillIndex的值以匹配用戶選擇的葯丸的index ，如下所示：

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

最后，在您的模板中：

參考index以確定它是否與所選葯丸匹配，該葯丸將存儲在activePillIndex屬性中，以便[ngClass]相應地添加active class。

並使用(click)事件調用selectPill() function 旨在跟蹤隨后選擇的葯丸的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 class 應用於第一個元素，隨后的click事件將導致[ngClass]指令設置active class 到所選葯丸，並相應地從先前選擇的葯丸中刪除active class。

Answer 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;
}