使用 Angular6 在 3 個元素之間切換類

Question

我有三個 div

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

現在，我想在點擊時添加“活動”類和“組”類。 默認情況下，它應該出現在第一個“組”類 div 上。 'active' 類一次只能出現在一個 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>

但它在所有div上添加了active類

<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