web-dev-qa-db-ja.com

angular 6で動的にHTMLナビゲーションタブを作成する

私は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>

私はそれを変換しましたangular 6、以下は私の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>

今私はここに2つのパイントを持っています-1-どのようにタブに従ってタブコンテンツを動的にするか2-現在のタブは機能していません、あるタブから別のタブに変更しているので、タブコンテンツは常に同じままで、それに応じて変化していませんタブに。任意の助けいただければ幸いです。前もって感謝します。

htmlangulartabsangular6
5
Nitish Kumar

*ngIf 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 = 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];

ここで作業コードを確認

8
Abdul Rafay

HTMLタブをAngularに変換するのではなく、Angularと非常にうまく機能し、多くの構成可能なオプションが付属しているng-bootstrapコンポーネントを直接使用できます。以下はng-bootstrapタブのリンクです

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

0
Umang Patel