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

我在angular应用程序中工作，我在COVID 19应用程序中工作。我有5列的表格

• 陈述
• 证实
• 活跃的
• 恢复
• 死者

这是我的堆栈闪电战链接

这里也是我期望的参考

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

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

这是我的密码

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>

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

    </div>

州/犹他州
证实
活跃的
恢复
已故的

组件。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)
    }
  }

 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)
    }
  }

showarrow=false
排序（数据）{
this.isAscendingSort=！this.isAscendingSort；
this.showarrow=true//此处设置
data.forEach（item=>item.statewise.sort（函数a，b）{
如果（b状态a状态）{
返回1；
}
返回0；
}))
this.calculateDiff（this.sortedDataBasedOnDate）
如果（！this.isAscendingSort）{
this.showarrow=！this.showarrow//用于此处的降序切换类
设a=data.forEach（item=>item.statewise.sort（函数a，b）{
如果（a状态b状态）{
返回1；
}
返回0；
}))
this.calculateDiff（this.sortedDataBasedOnDate）
}
}

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

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>

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

    </div>

状态/UT

组件。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)
    }
  }

 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)
    }
  }

showarrowasc=false
showrowdesc=错误
隐藏=真
排序（数据）{
this.isAscendingSort=！this.isAscendingSort；
this.showarrowasc=！this.showarrowasc
this.showarrowdesc=false
data.forEach（item=>item.statewise.sort（函数a，b）{
如果（b状态a状态）{
返回1；
}
返回0；
}))
this.calculateDiff（this.sortedDataBasedOnDate）
如果（！this.isAscendingSort）{
this.showarrowdesc=！this.showarrowdesc；
this.showarrowasc=false
设a=data.forEach（item=>item.statewise.sort（函数a，b）{
如果（a状态b状态）{
返回1；
}
返回0；
}))
this.calculateDiff（this.sortedDataBasedOnDate）
}
}

---

任何帮助都会很好。

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

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

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

const showArrows={
证实：假，
活动：错误
}

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

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

证实

作为确认列的示例

---

希望能有所帮助。

您在这里的工作方式必须编写一些不必要的代码才能实现这一点。我更喜欢创建一个带有字段、排序等的json对象，并使用循环创建一个表，在这种情况下，您只需要一个排序函数和一个函数就可以获得正确的图标来更新表。您可以给我一个关于任何测试数据的演示吗？我是Angular的beigner，您可以通过这个链接了解它。说真的，这就是你的答案。我不学习如何制作表格。我想要的是在点击特定列时切换箭头。是的，你创建表格的方式充满了不必要的代码。创建一个动态表，使用angular框架的强大功能或使用一些内置的数据表包。那么我应该为我的5个Column添加show array，并为eavh Column添加10个属性show hide吗@gerstamsI不太明白你的问题。我建议创建一个具有n个属性（n是您拥有的列数）的对象（而不是数组）。然后在你的模板中使用这些属性。这也不是一个有效的方法，因为我有这么多的表，对于所有这些我不能做同样的@gerstamsIf如果工作量太大，而您自己又不想这样做，可以检查“角度材质”排序标题：。这将大部分代码抽象出来，您基本上只需要提供列、列标题和onceOKay数据，这是非常有趣的