使用 Angular6 在 3 个元素之间切换 class

Question

我有三个div的

<div class = "form">
 <div class = "group"></div>
 <div class = "group"></div>
 <div class = "group"></div>
</div>

现在，我想在单击时添加 class 'active' 和 'group' class。默认情况下，它应该出现在第一个 'group' class div 上。 'active' class 一次只能出现一个 div

.ts 文件:

selectStatus: boolean = false;

selectGroup() {
  this.selectStatus = !this.selectStatus;
}

.html 文件:

<div class = "form">
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
</div>

但是它在所有 divs

上添加了 active class

<div class = "form">
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
  <div class = "group" (click) = "selectGroup()" [ngClass]="{selectStatus ? 'active' : 'not-active'}"></div>
</div>

selectStatus: boolean = false;

selectGroup() {
  this.selectStatus = !this.selectStatus;
}

所有 div 的

都会出现

Answer 1

.ts 文件:

activeDivIndex: number = 0;

selectGroup(activeDivIndex: number) {
  this.activeDivIndex= activeDivIndex;
}

查看：

<div class = "form">
  <div class = "group" (click) = "selectGroup(0)" [ngClass]="activeDivIndex == 0? 'active' : 'not-active'"></div>
  <div class = "group" (click) = "selectGroup(1)" [ngClass]="activeDivIndex == 1? 'active' : 'not-active'"></div>
  <div class = "group" (click) = "selectGroup(2)" [ngClass]="activeDivIndex == 2? 'active' : 'not-active'"></div>
</div>

更好的是，您可以使用 ngFor 并检查当前索引是否与 activeDivIndex

相同

.ts 文件:

groupList: Array<Object> = [{foo: "Foo 1", bar: "Bar 1"}, {foo: "Foo 2", bar: "Bar 2"}, {foo: "Foo 3", bar: "Bar 3"}];
activeDivIndex: number = 0;


selectGroup(activeDivIndex: number) {
  this.activeDivIndex= activeDivIndex;
}

查看：

<div class = "form">
  <div *ngFor="let groupItem of groupList, let i = index" class="group" (click)="selectGroup(i)" [ngClass]="activeDivIndex === i ? 'active' : 'not-active'">Foo: {{groupItem.foo}}, Bar: {{groupItem.bar}}</div>
</div>

或者如果您不需要 not-active class:

<div class = "form">
  <div *ngFor="let groupItem of groupList, let i = index" class="group" (click)="selectGroup(i)" [ngClass]="{'active': activeDivIndex === i}">Foo: {{groupItem.foo}}, Bar: {{groupItem.bar}}</div>
</div>

Answer 2

您可以按如下方式更新您的代码：

.html

<div class = "form">
  <div class = "group" (click) = "selectGroup(0)" [ngClass]="{'active': selectStatus[0]}"></div>
  <div class = "group" (click) = "selectGroup(1)" [ngClass]="{'active': selectStatus[1]}"></div>
  <div class = "group" (click) = "selectGroup(2)" [ngClass]="{'active': selectStatus[2]}"></div>
</div>

.ts

selectStatus = [true, false, false];

selectGroup(id) {
    this.selectStatus = this.selectStatus.map((item, index) => {
        if (index === id) {
             return true;
        } 
        return false;            
    })
}

这里给出了工作示例：Stackblitz

使用 Angular6 在 3 个元素之间切换 class

Toggle class between 3 elements using Angular6

html

javascript

angular6