angular - 当我展开一个标签部分时，所有克拉箭头都朝上。只有选定的箭头应该出现

Question

enter image description here实际上有四个选项卡，每个选项卡上都有克拉点击功能。当我展开一个标签部分时，所有克拉箭头都朝上。只有选定的箭头应该出现

accountSelection(account) {
    if (!this.selectedAccount || account.accountId !== this.selectedAccount.accountId) {
      this.selectedAccount = account;
      this.selectedAccountTransactions = this.transactionData.unrealizedGainLossDetails.filter(acc => acc.accountId === this.selectedAccount.accountId);
      this.initialPaging();
    } else {
      this.selectedAccount = undefined;
      this.selectedAccountTransactions = undefined;
      this.unrealizedTransaction = undefined;
    }
    this.cd.detectChanges();
  }

<span class="col-md-1 p-0 acc-carat col-sm-1" (click)="accountSelection(account)" *ngIf="!transactionsInfo.loading">
                            <i _ngcontent-c2="" *ngIf="!selectedAccount " class="fa fa-caret-down" aria-hidden="true"></i>
                            <i _ngcontent-c2="" *ngIf="selectedAccount" class="fa fa-caret-up" aria-hidden="true"></i>
                    </span>
                    

Answer 1

即使你可以像这样使用对象的新属性来设置 -

<span class="col-md-1 p-0 acc-carat col-sm-1" (click)="accountSelection(account)" *ngIf="!transactionsInfo.loading">
    <i _ngcontent-c2="" *ngIf="account?.open" class="fa fa-caret-down" aria-hidden="true"></i>
    <i _ngcontent-c2="" *ngIf="!account?.open" class="fa fa-caret-up" aria-hidden="true"></i>
</span>

accountSelection(account) {
    ..... //Set (open = false) for every item in array
    account.open = true;
    this.cd.detectChanges();
  }

现在您正在使用全局变量 selectedAccount，它会在您每次调用函数时更新。