Angular2-类属性上的双向数据绑定

Angular2 - Two-way data binding on class attribute

本文关键字：数据绑定 属性 Angular2-      更新时间：2023-11-22

我使用的是twitter引导选项卡，当用户切换不同的选项卡时，我想跟踪应用于li标签的active类。我一直在跟踪class属性，因为我想通过自己的自定义按钮，通过将代码中的class属性更改为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-不起作用。

有什么想法吗？

我在您的plunker中发现了一些逻辑错误。现在，检查下面的代码和工作的plunker（根据您的编码方式）。

工作演示

<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>

活动属性必须是true或false，这取决于选项卡i是否处于活动状态。

请参阅此链接：https://v2.angular.io/docs/js/latest/api/common/index/NgClass-directive.html.

相关文章：