在 angular 中创建 html nav-tabs 动态 6

Question

我是 angular 6 的新手，我在 HTML 中创建了选项卡，我需要在 angular 6 中将其转换并使其动态化。下面是我的 HTML 代码-

<ul class="nav nav-tabs side_nav" role="tablist">
  <li role="presentation" class="dashboard_li active">
     <a href="#one" class="coin_name" aria-controls="one" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation" class="dashboard_li">
    <a href="#two" class="coin_name" aria-controls="two" role="tab" data-toggle="tab"></a>
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="one"></div>
  <div role="tabpanel" class="tab-pane active" id="two"></div>
</div>

我已经转换了angular6，下面是我的angular代码-

<ul class="nav nav-tabs side_nav" role="tablist">
  <li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
    <a (click)="selectedwallet = coinwallet" aria-controls="one" role="tab" data-toggle="tab"></a>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="one"></div>
  <div role="tabpanel" class="tab-pane active" id="two"></div>
</div>

现在我这里有两品脱 - 1- 我如何根据选项卡使 tab-content 动态化 2- 当前选项卡不工作，因为我正在从一个选项卡更改为另一个选项卡，tab-content 始终保持不变，它不会根据选项卡进行更改。任何帮助，将不胜感激。提前致谢。

Answer 1

您需要使用 *ngIf angular 指令show/hide 选项卡内容

<ul class="nav nav-tabs side_nav" role="tablist">
  <li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
    <a (click)="selectedwallet = wallet" aria-controls="one" role="tab" data-toggle="tab">{{wallet}}</a>
  </li>
</ul>

<div class="tab-content">
  <div *ngIf="selectedwallet === coinwallet[0]" role="tabpanel" class="tab-pane active" id="one">wallet 1 content</div>
  <div *ngIf="selectedwallet === coinwallet[1]" role="tabpanel" class="tab-pane active" id="two">wallet 2 content</div>
</div>

.ts:

  coinwallet: string[] = ['wallet1','wallet2'];
  selectedwallet = this.coinwallet[0];

check working code here

Answer 2

我认为与其将 HTML 选项卡转换为 Angular，不如直接使用 ng-bootstrap 组件，它与 Angular 配合得很好，并且附带了很多可配置的选项。下面是 ng-bootstrap 选项卡的 link

https://ng-bootstrap.github.io/#/components/tabs/examples

在 angular 中创建 html nav-tabs 动态 6

creating html nav-tabs dynamic in angular 6

html

tabs

angular

angular6