Question

我有三个div

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

现在，我要在单击时添加“活动”类和“组”类。默认情况下，它应该出现在第一个“组”类div上。 “活动”类一次只能出现在一个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>

但是它在所有active上添加了div类

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

<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个元素之间切换类

2 个答案: