javascript - 以角度将 api 集成到导航选项卡

Question

        <div class="card card-primary card-outline card-outline-tabs">
      <div class="card-header p-0 border-bottom-0">
        <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
          <li class="nav-item" *ngFor="let farmingdata of farminginnerdata;let i=index" >
            <a
              class="nav-link" [class.active]="i==0"
              id="{{ farmingdata.id }}"
              href="{{ farmingdata.id }}"
              data-toggle="pill"
              (click)="onContent(farmingdata.id)"
              role="tab"
              aria-controls="custom-tabs-three-home"
              aria-selected="true"
              >{{ farmingdata.name }}</a>
          </li>
        </ul>
      </div>
      <div class="card-body" *ngIf="farminginnerdata">
        <div class="tab-content" id="custom-tabs-three-tabContent"
         *ngFor="let farmingdata of farminginnerdata ;let i=index">
          <div
            class="tab-pane fade show" [class.active]="i==0"
            [id]="farmingdata.id"

            role="tabpanel"
            aria-labelledby="custom-tabs-three-Manual-tab">
          <div *ngIf="farmingdata.content; else blankdata" [innerHTML]="farmingdata.content"></div>
          <ng-template #blankdata>No data available </ng-template>

          </div>

        </div>
      </div>


      <!-- /.card -->
    </div>

我是角度版本 10 的学习者。我想将 API 集成到那个 nab-tabs。问题是当数据首次加载时，第一个选项卡被激活并在选项卡内容中显示其数据，但是当我更改为另一个选项卡时，它不显示数据。我必须更改或修改哪些部分，需要一些帮助来解决它。

问题：使用 bootstrap 4 导航选项卡的动态数据。
环境：Angular 框架 ver.10
尝试：将 API 集成到卡片标题导航选项卡，单击特定选项卡时获取 id，但卡片正文数据未更改。

标签： javascriptangularbootstrap-4angular10