[英]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.