gpt4 book ai didi

html - 以 Angular 6 动态创建 html 导航标签

转载 作者:行者123 更新时间:2023-12-03 15:45:35 25 4
gpt4 key购买 nike

我对 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- 当前选项卡不起作用,因为我正在从一个选项卡更改为另一个选项卡,选项卡内容始终保持不变,不会根据选项卡更改。
任何帮助,将不胜感激。提前致谢。

最佳答案

您需要使用 *ngIf 显示/隐藏标签内容 Angular Directive(指令)

<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

关于html - 以 Angular 6 动态创建 html 导航标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51533703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com