单击时将类动态添加到 td 并在 angular/typescript 中单击其他 td 时切换和删除

Question

我正在使用 Angular 应用程序，我正在开发 COVID 19 应用程序。我有 5 列的表格

• 1. 状态
• 1. 确认
• 1. 活动中
• 4. 已恢复
• 5. 已故

这是我的堆栈闪电战链接stack blitz link。

这里也是我期待的参考Expectation。

单击任何列时，我会按升序或降序对整个表格数据进行排序，并显示向上箭头表示升序，向下箭头表示降序。

我的问题是当我单击任何列时，所有列上的所有箭头都会更改，因为我只想更改我单击的列的箭头并隐藏其他列的箭头。最初，当页面加载时，我的箭头不应该可见，而是只有当我点击任何列时它们才可见。

这是我的代码

component.html

               <tr>
                    <th (click)="sortAscending(sortedDataBasedOnDate)" class="sticky state-heading">
                        <div class="heading-content"><abbr title="State">State/UT</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxCases(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Confirmed">Confirmed</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxActive(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Active">Active</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxRecovered(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Recovered">Recovered</abbr>
                            <div></div>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxDeath(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Deaths">Deceased</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>
                </tr>

Component.ts

 showarrow=false


 sortAscending(data) {
    this.isAscendingSort = !this.isAscendingSort;
    this.showarrow=true                                 // setting here
    data.forEach(item => item.statewise.sort(function (a, b) {
      if (b.state < a.state) {
        return -1;
      }
      if (b.state > a.state) {
        return 1;
      }
      return 0;
    }))
    this.calculateDiff(this.sortedDataBasedOnDate)

    if (!this.isAscendingSort) {
    this.showarrow=!this.showarrow           // for descending toggling class here
      let a = data.forEach(item => item.statewise.sort(function (a, b) {
        if (a.state < b.state) {
          return -1;
        }
        if (a.state > b.state) {
          return 1;
        }
        return 0;
      }))
      this.calculateDiff(this.sortedDataBasedOnDate)
    }
  }

我也尝试过这种方法，最初在页面加载时隐藏箭头，但它有同样的问题，如果我点击任何列箭头将出现在所有列上。

Component.html

   <div class="heading-content"><abbr title="State">State/UT</abbr>
        <div [ngClass]="{'down-arrow':showarrowdesc , 'up-arrow' : 
         showarrowasc,'hide':hide}"></div>

    </div>

Component.ts

 showarrowasc=false
 showarrowdesc=false
 hide=true

 sortAscending(data) {
    this.isAscendingSort = !this.isAscendingSort;
    this.showarrowasc=!this.showarrowasc
    this.showarrowdesc=false
    
    data.forEach(item => item.statewise.sort(function (a, b) {
      if (b.state < a.state) {
        return -1;
      }
      if (b.state > a.state) {
        return 1;
      }
      return 0;
    }))
    this.calculateDiff(this.sortedDataBasedOnDate)

    if (!this.isAscendingSort) {
    
    this.showarrowdesc=!this.showarrowdesc;
    this.showarrowasc=false
      let a = data.forEach(item => item.statewise.sort(function (a, b) {
        if (a.state < b.state) {
          return -1;
        }
        if (a.state > b.state) {
          return 1;
        }
        return 0;
      }))
      this.calculateDiff(this.sortedDataBasedOnDate)
    }
  }

任何帮助都会很棒。

Answer 1

我猜您正在剪切您提供的代码，因为我看不到您从模板调用的 sortByMaxCases()（以及除 sortAscending() 之外的其他代码）。

然后，从我在这里看到的情况来看，您似乎正在使用相同的布尔值切换所有列：showarrow。

为了克服这个问题，您可以创建一个包含多个属性的对象，每列一个，如下所示：

const showArrows = {
    confirmed: false,
    active: false
}

添加您拥有的所有其他列，并将其中一列定义为 true 作为初始排序。

然后在您的模板中引用该对象，如下所示：

<th (click)="sortAscending(sortedDataBasedOnDate)" class="sticky state-heading">
    <div class="heading-content"><abbr title="State">Confirmed</abbr>
        <div [ngClass]="showArray.confirmed ? 'down-arrow' : 'up-arrow'"></div>
    </div>
</th>

作为已确认列的示例。

希望对你有帮助。