在 Angular 6 中动态创建 html 导航选项卡

Posted 2023-03-05

【中文标题】在 Angular 6 中动态创建 html 导航选项卡

【英文标题】：creating html nav-tabs dynamic in angular 6

【发布时间】：2019-01-03 03:31:33

【问题描述】：

我对 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>

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

【参考方案1】：

您需要使用*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];

check working code here

【讨论】：

感谢您的回复，您提到的链接工作正常，但是当我根据项目需要编辑该代码时，它不起作用 export class AppComponent coinwalletTab: string[] = ['wallet1 ','钱包2']; selectedwalletTab = this.coinwalletTab[0];硬币钱包：字符串[]； selectedwallet：任意； OnInit() this.coinwallet = ['wallet1', 'wallet2']; this.selectedwallet = this.coinwallet[0];

把 OnInit() 留空，你为什么声明'selectedwallet: any'？

@NitishKumar 向我展示你在 stackblitz 或 jsfiddle 中的代码，或者用你的完整代码更新你的问题。

【参考方案2】：

我认为与其将 HTML 选项卡转换为 Angular，不如直接使用 ng-bootstrap 组件，该组件与 Angular 配合得非常好，并带有许多可配置选项。下面是 ng-bootstrap 选项卡的链接

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

【讨论】：

感谢您的回复，但我已经创建了这些选项卡，如果我更改选项卡，我将不得不更改很多内容，这样就无法解决