javascript - 按钮需要点击两次才能折叠 html Angular div

Question

我有一个 div 列表，这些 div 具有展开和折叠功能，如下所示。它工作正常，除了我需要单击按钮两次才能打开另一个 div。第一次点击只会折叠第一个 div。

<div *ngFor="let item of data; let i = index">
      <button
        (click)="setIndex(i)"
      >
        <span
          [translate]=“item.title”
        ></span>

      </button>
      <div
        [class.collapse]='currentIndex !== i'
      >
        <div [innerHTML]=“item.description | translate"
        ></div>
      </div>
      <hr>

    </div>

我的 typescript 函数如下所示。

setIndex(i) {
    this.currentIndex = this.currentIndex === -1 ? i : -1;
  }

我尝试将点击事件更改为 mousedown 或 keydown 但它没有用。

Answer 1

通过以下方式更改您的 setIndex 函数:

setIndex(i) {
   this.currentIndex = this.currentIndex === i ? -1 : i;
}

因为第一次点击将 currentIndex 设置为 -1 所以它折叠了第一个 div (因为 currentIndex 与所有 i 值) 但你需要它是 i (新点击的 i) 到也显示新的 div。

如果 div 当前显示并且您再次单击它，(因此 currentIndex === i) 我们将其设置为 -1 所以它崩溃了。