Question

我有一组按钮。当我单击此按钮之一时，我希望该按钮处于激活状态。当我单击“下一步”按钮时，我也希望该按钮上的课程处于活动状态（并且我不想从上一个按钮中删除活动的课程）。所以我想有多个活动按钮（如果选中），并且当我单击选定按钮时，我想删除活动类（切换）。我该怎么办？

如果我执行以下操作，则只能选择一个按钮。如何选择多个按钮？

<div class="btn-group">
  <div class="btn btn-outline-secondary" *ngFor="let test of tests" (click)="select(test)" [ngClass]="{active: isActive(test)}"
  >
    <input type="radio" name="" autocomplete="off" value="">
     {{test}}
  </div>
</div>

ts。文件

从'@ angular / core'导入{Component，ViewEncapsulation};

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['.test.scss'],
})

export class Test {

  tests: any[];


  constructor() {
    this.tests = ['test1', 'test2', 'test3']

  }

  ngOnInit() {

  }

  select(item) {
    this.selected = item;
  };
  isActive(item) {
      return this.selected === item;
  };
}

Answer 1

在每个测试对象上保留一个属性，指示是否已选中。

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['.test.scss'],
})

export class Test {

  tests: any[];


  constructor() {
    this.tests = ['test1', 'test2', 'test3']

  }

  ngOnInit() {

  }

  select(item) {
    item.selected = !item.selected;
  };
  isActive(item) {
      return item.selected;
  };
}

将活动类添加到有角度的选定元素中（可能有多个活动元素）

1 个答案: