Angular 6 - Переключить класс на выбранные элементы и переключить класс на другие элементы - PullRequest
Новая
       13

Angular 6 - Переключить класс на выбранные элементы и переключить класс на другие элементы

0 голосов
/ 08 марта 2019

У меня есть угловой цикл, который возвращает список элементов из моей базы данных. Внутри каждого из этих элементов есть массив (где находится второй цикл *ngFor.)

Второй цикл (*ngFor="let option of item.options) будет иметь четыре результата. Когда я нажимаю <li> с классом вопроса, я хочу добавить класс, чтобы выделить его. Однако, если я нажму на другой <li> (например, вариант 3 из 4), я бы хотел добавить к нему класс, но удалить его из первого нажатого <li>. 

<ul>
  <li *ngFor="let item of items | async">
    <div>{{ item.title }}</div>
    <div>{{ item.question }}</div>
    <ul>
      <li class="question" *ngFor="let option of item.options">
        {{option}}
      </li>
    </ul>
  </li>
</ul>

Возможно, стоит отметить, что в первом цикле может быть до 15 элементов *ngFor="let item of items | async"

Ответы [ 2 ]

2 голосов
/ 08 марта 2019

Самый простой способ - использовать переменную с именем, например. "itemSelect" и используйте в * ngFor = "..; let i = index", при нажатии равняйте переменную i и используйте [ngClass] или [className]. Поскольку у вас есть два * ng, вам нужен массив переменных 

<!--take acount the let i=index-->
<li *ngFor="let item of items | async;let i=index">
   ...
    <ul>
      <!--use itemSelect[i]-->
      <li [className]="j==itemSelect[i]?'question hightligth':'question'
          *ngFor="let option of item.options;let j=index" 
           (click)="itemSelect[i]=j">
            {{option}}
      </li>
    </ul>
<li>

Не забудьте объявить в вашей тс 

itemSelect:number[]=[]
0 голосов
/ 08 марта 2019

Вы можете сделать это, обновив свой HTML следующим образом 

<ul>
  <li *ngFor="let item of items; let i = index">
    <div>{{ item.title }}</div>
    <div>{{ item.question }}</div>
    <ul>
    <li class="question"
        [class.active]="i == parentIndex && j == childIndex"
        (click)="setClickedRow(i, j)"
        *ngFor="let option of item.options; let j = index">
        {{ option }}
    </li>
    </ul>
  </li>
</ul>

Наконец, вам нужно обновить файл ts следующим образом 

parentIndex : Number;
childIndex : Number;

setClickedRow(i,j){
 this.parentIndex=i;
 this.childIndex = j;
}
...