Angular 6 — переключить класс на щелкнутые элементы и переключить класс на другие элементы

У меня есть цикл Angular, который возвращает список элементов из моей базы данных. Внутри каждого из этих элементов находится массив (где находится второй цикл *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"


angular ng-class
person Que    schedule 07.03.2019    source источник
comment
Попробуйте это stackblitz.com/edit/   -  person Koushik Ravulapelli    schedule 08.03.2019
comment
Спасибо за ответ. К сожалению, это похоже на ответ ниже, в соответствии с которым, если у меня есть более одного вопроса (в первом цикле ngFor), выбранный ответ на первый вопрос будет удален при выборе ответа на другой вопрос.   -  person Que    schedule 08.03.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

<!--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[]=[]
person Eliseo    schedule 07.03.2019
comment
Боюсь, это не работает. При этом выделяются только все четыре рассматриваемых ответа при нажатии ответа 1. При нажатии ответов на любой из других вопросов ничего не происходит. - person Que; 08.03.2019
comment
Итак, это работает, но в коде есть пара ошибок. Во-первых, должен быть второй ul перед вложенным li. Во-вторых, вместо i==itemSelect[i] должно быть j==itemSelect[i]. Кроме того, последний li был закрыт неправильно. Если вы сможете обновить свой ответ (просто для справки других пользователей, я отмечу его как ответ! - Спасибо, Элисео, очень признателен! - person Que; 08.03.2019
comment
@Que, спасибо за совет, и мои извинения за мой код ошибки (только что исправлено) - person Eliseo; 08.03.2019
comment
Спасибо за потраченное время и усилия, очень признателен! - person Que; 08.03.2019

arrow_upward
0
arrow_downward

Вы можете сделать это, обновив свой 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;
}
person Md. Abul Hasan    schedule 07.03.2019
comment
Спасибо за ответ. Боюсь, это тоже не работает. Это работает, если у меня есть один вопрос с четырьмя возможными ответами. Но первый цикл ngFor проходит до 13 вопросов. В вашем примере нажатие на ответ на вопрос 2 удалит класс, который был добавлен к ответу на вопрос 1, и так далее для всех остальных вопросов. - person Que; 08.03.2019