Question

我们说我有这段代码：

<div id="parent">
    <div class="child">
    <div class="child">
    <div class="child">
</div>

我想开始自动添加到第一个孩子班active。之后，我希望每X秒切换到active类的下一个孩子。是否可以使用Angular 2执行此操作？

Answer 1

<强> Working Example

您可以使用以下模板动态地将类和项添加到列表中：

<div id="parent">
  <div *ngFor="let item of items; let i = index"
    class="child" [class.active]="activeIndex === i">
    {{item}}
  </div>
</div>

支持部分：

export class AppComponent {
  activeIndex = 0;
  items = ['item 1', 'item 2', 'item 3']

  ngOnInit() {
    setInterval(_ => {
      this.activeIndex++;
      if (this.activeIndex >= this.items.length){
        this.activeIndex = 0;
      }
    }, 500)
  }
  addItem() {
    this.items.push('item ' + (this.items.length + 1));
  }
}

使用Angular 2在兄弟元素之间切换类

1 个答案: