Angular 6 - 在点击的项目上切换 Class 并在其他项目上切换 Class

Question

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

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

Answer 1

最简单的方法是使用一个变量，例如"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>

不要忘记在你的 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;
}

Angular 6 - 在点击的项目上切换 Class 并在其他项目上切换 Class

Angular 6 - Toggle Class on clicked items and toggle Class off other items

ng-class

angular