Класс Angular Toggle только на одном div

Question

данные

test = [
    {
      "test1": {
            "qq": ["qq", "ww", "aa", "bb"],
          },
    },
    {
      "test1": {
            "qq": ["11", "22", "33", "44"],
          },
    }
];

код

<ng-container *ngFor="let list of test">

  <div class="a" (click)="clickEvent(list)" [ngClass]="list.status ? 'blue' : ''">
    {{list.test1.qq[0]}}
    </div>

  <div class="a" (click)="clickEvent(list)" [ngClass]="list.status ? 'blue' : ''">
    {{list.test1.qq[1]}}
    </div>
</ng-container>

ц

status: boolean = false;
clickEvent(list){
    list.status = !list.status;       
}

https://stackblitz.com/edit/angular-skdlf2?file=src%2Fapp%2Fapp.component.ts

Теперь я нажимаю 'qq', 'ww' также переключает класс

Но я просто хочу переключить класс на один div.

Нажмите «qq», только класс переключения «qq»

Как это сделать?

Answer 1

* ngFor не создает несколько экземпляров, у вас есть только один экземпляр.Так что если вы измените status, то все ваши div будут изменены.

Решение состоит в том, чтобы создать childComponent, * ngFor будет выполнять итерацию и создавать столько экземпляров компонента, сколько элементов.

При этомКаждый компонент (элемент) будет иметь свой собственный статус.

Надеюсь, это поможет!

Answer 2

В зависимости от структуры вашего массива вам может понадобиться передать целевой элемент обработчику щелчков. Который в вашем случае list.test1.qq[1] или list.test1.qq[0].

Тогда вам может потребоваться отдельно указать компоненту, по какому элементу щелкнули, потому что целевой элемент в вашем случае - строка.

В моем рабочем решении я только что определил строку с именем clicked, которая запоминает и переключает целевой элемент и передает целевой элемент обработчику щелчков.

Моё рабочее решение на стеке

Answer 3

<div class= "container">
<li *ngFor="let list of test"></li>

  <div class="a" (click)="clickEvent(list)" [ngClass]="list.status ? 'blue' : ''">
    {{list.test1.qq[0]}}
    </div>

  <div class="a" (click)="clickEvent(list)" [ngClass]="list.status ? 'blue' : ''">
    {{list.test1.qq[1]}}
    </div>
</div>