[英]creating html nav-tabs dynamic in angular 6
我对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>
我将其转换为角度6,下面是我的角度代码-
<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指令显示/隐藏制表符内容
<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];
我认为您可以直接使用ng-bootstrap组件,而不是将HTML选项卡转换为Angular,它可以与Angular一起很好地工作,并带有许多可配置的选项。 以下是ng-bootstrap标签的链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.