[英]Angular2 - Two-way data binding on class attribute
我正在使用twitter bootstrap選項卡,並且當用戶切換不同的選項卡時,我想跟蹤應用於li
標記的active
類。 我一直跟蹤類屬性,因為我想通過更改從代碼activate
類屬性來通過自己的自定義按鈕來激活選項卡。 我正在使用以下代碼來實現此目的:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'app',
template: `
<div class="container-fluid" >
<ul class="nav nav-tabs" >
<li *ngFor="#tab of tabs" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}</a></li>
</ul>
<div class="tab-content">
<div *ngFor="#tab of tabs" [(class)]="tab.contentClass" [id]="tab.id" >{{tab.id}} content goes here.</div>
</div>
</div>
<button (click)="openTab('tab1')" >Tab 1 Button</button>
<button (click)="openTab('tab2')" >Tab 2 Button</button>
`
})
class MainApp{
public tabs = [
{class: "active", id: "tab1", contentClass:"tab-pane active"},
{class: "", id: "tab2", contentClass:"tab-pane"}
]
openTab(id){
var tabToActivate;
for(var i=0;i<this.tabs.length;i++){
if(this.tabs[i].id == id)
tabToActivate = this.tabs[i];
this.tabs[i].class = "";
this.tabs[i].contentClass = "tab-pane";
}
tabToActivate.class = "active";
tabToActivate.contentClass = "tab-pane active";
}
}
bootstrap(MainApp);
但是似乎在我切換不同的選項卡時,綁定中斷或發生了什么,自定義的選項卡按鈕暫時無法使用。 為什么會這樣呢?
我在這里重現了問題
點擊
tab2
單擊“
Tab Button 1
不起作用。
有什么想法嗎?
我在您的插栓中發現了一些邏輯錯誤。 現在,根據您的編碼方式,檢查下面的代碼和可使用的插件。
<ul class="nav nav-tabs" >
<li *ngFor="#tab of tabs" (click)="openTab(tab.id)" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}. {{tab.class}}</a></li>
</ul>
openTab(id){
for(var i=0;i<this.tabs.length;i++){
console.log('started' + id);
if(this.tabs[i].id != id)
{
this.tabs[i].class = "";
this.tabs[i].contentClass = "tab-pane";
}
else
{
this.tabs[i].class = "active";
this.tabs[i].contentClass = "tab-pane active";
}
}
}
我會改用ngClass:
<li *ngFor="#tab of tabs"
[ngClass]="{active: tab.active}">...</li>
根據選項卡i是否處於活動狀態,active屬性必須為true或false。
看到此鏈接: https : //v2.angular.io/docs/js/latest/api/common/index/NgClass-directive.html 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.