[英]Angular2 - Two-way data binding on class attribute
I am using twitter bootstrap tabs and I want to keep track of the active
class that is applied to the li
tag as the user toggles different tabs. 我正在使用twitter bootstrap选项卡,并且当用户切换不同的选项卡时,我想跟踪应用于
li
标记的active
类。 I am keeping track of class attribute because I want to activate tabs through my own custom buttons by changing class attribute to activate
from the code. 我一直跟踪类属性,因为我想通过更改从代码
activate
类属性来通过自己的自定义按钮来激活选项卡。 I am using the following code to achieve this: 我正在使用以下代码来实现此目的:
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);
but it seems that as I toggle through different tabs the binding gets break or something and the customized tab buttons doesn't work for a moment. 但是似乎在我切换不同的选项卡时,绑定中断或发生了什么,自定义的选项卡按钮暂时无法使用。 Why is this happening?
为什么会这样呢?
I re-produced the problem on plunkr here 我在这里重现了问题
click
tab2
点击
tab2
click
Tab Button 1
- doesn't work.单击“
Tab Button 1
不起作用。
Any thoughts? 有什么想法吗?
I found some logic error in your plunker. 我在您的插栓中发现了一些逻辑错误。 Now, check below code and working plunker (according to your way of coding).
现在,根据您的编码方式,检查下面的代码和可使用的插件。
<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";
}
}
}
I would use ngClass instead: 我会改用ngClass:
<li *ngFor="#tab of tabs"
[ngClass]="{active: tab.active}">...</li>
The active property must be true or false according if the tab i's active or not. 根据选项卡i是否处于活动状态,active属性必须为true或false。
See this link: https://v2.angular.io/docs/js/latest/api/common/index/NgClass-directive.html . 看到此链接: https : //v2.angular.io/docs/js/latest/api/common/index/NgClass-directive.html 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.