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，该变量在每次调用函数时都会更新。

当我展开一个制表符部分时，所有的克拉箭头都朝上。仅显示选定的箭头

1 个答案: