Angular 6 - 在单击的项目上切换类并切换其他项目的类别

Question

我有一个Angular循环，它从我的数据库返回一个项目列表。每个项目中都有一个数组（这是第二个*ngFor循环所在的位置。）

第二个循环（*ngFor="let option of item.options）将有四个结果。当我点击带有一类问题的<li>时，我想添加一个类来突出显示它。但是，如果我点击另一个<li>（例如，4中的选项3），我想添加一个类，但是从第一个单击的<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>

值得注意的是，在第一个循环*ngFor="let item of items | async"中我最多可以有15个项目

Answer 1

简单的方法是使用一个名为eg的变量。 “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>

别忘了在你的ts中宣布

itemSelect:number[]=[]

Answer 2

您可以通过更新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;
}