用于元素的选定ng的角度4动画

Question

我正在尝试用angular4动画制作手风琴。问题是当我点击一个ul元素时，每个元素都会被触发并且所有内容都被显示/隐藏。我无法跟踪特定的点击元素。我如何跟踪cliked elemt并仅为该元素应用动画。

我的代码如下：

<ul class="each-filter-desc">
      <!-- *Outer ngfor for acoordion-->
      <li class="each-filter-options" *ngFor='let tertiaryFilterCategory of tertiaryLevelData.groupBy.values; let k = index'>
        <p (click)="toggleOptionsHeight(k)" class="flex flex-start flex-align-center">

          <span class="filter-dropDdown-arrow" [class.openOptions]="openOptions === true"></span>{{tertiaryFilterCategory.name}}</p>
        <ul class="sub-filter-criteria" [@toggleHeight]="hightState">

          <!--  * below ngfor paints the accordion content(each accordion content is also coming from json)
          -->
          <li class="sub-filter-each flex flex-between" *ngFor='let tertiarySubValues of tertiaryFilterCategory.values; let l = index'>content for each accordion
          </li>
        </ul>
      </li>
    </ul>` 

Ts代码：

    animations: [
    trigger("toggleHeight", [
      state(
        "inactive",
        style({
          height: "0",
          opacity: "0",
          visibility: "hidden"
        })
      ),
      state(
        "active",
        style({
          height: "*",
          opacity: "1",
          visibility: "visible"
        })
      ),
      transition("inactive => active", animate("200ms ease-in")),
      transition("active => inactive", animate("200ms ease-out"))
    ])]
      toggleOptionsHeight(index) {
    try {

      event.preventDefault();
      this.hightState == "inactive"
        ? (this.hightState = "active")
        : (this.hightState = "inactive");
    } catch (error) {
      this.logger.log("error", error);
    }
  }