AngularngFor-改变选中行的CSS样式而不是所有行
创始人
2024-10-28 17:00:45
0次

在Angular中，要改变选中行的CSS样式，而不是所有行，需要使用*ngFor指令和类绑定技巧。

首先，在HTML模板中使用*ngFor指令生成行，给每行添加一个CSS类名，如下所示：


  {{ item.name }}
  {{ item.age }}

接着，在组件中添加一个方法来切换选中项。这个方法会将当前选中项的selected属性设置为true，并将所有其他项的selected属性设置为false。

toggleSelected(item) {
  item.selected = !item.selected;

  // unselect all other items
  this.items.forEach(it => {
    if (it !== item) {
      it.selected = false;
    }
  });
}

最后，在组件的CSS样式文件中添加选中行的样式：

tr.selected {
  background-color: yellow;
}

这样，当用户点击某一行时，这一行将会被选中，并且只有这一行的背景色变为黄色，其他行的背景色保持不变。

上一篇：AngularngClass在类没有定义时引发错误。

下一篇：AngularngFor:使用SlicePipe时如何访问项目？

相关内容

热门资讯

第5新版(来玩app)外挂透明... 此外，数据分析德州(来玩app)辅助神器app还具备辅助透视行为开挂功能，通过对客户来玩app透明挂...
8个打法!wepoke透明挂辅... 8个打法!wepoke透明挂辅助软件是真的(插件)透视（存在有挂）-哔哩哔哩；玩家必备必赢加哟《13...
四小程序!雀神微信小程序怎么开... 您好，雀神微信小程序怎么开挂这款游戏可以开挂的，确实是有挂的，需要了解加微【485275054】很多...
1个大厅!德扑ai操作(手牌胜... 1个大厅!德扑ai操作(手牌胜率计算工具)辅助透视（有挂实锤）-哔哩哔哩1、每一步都需要思考，不同水...
九黑科技(wepoke app... 九黑科技(wepoke app)外挂透明挂辅助APP(透视)技巧教程(真是有挂)-哔哩哔哩；wepo...
5个app技巧!微扑克机制技巧... 1、5个app技巧!微扑克机制技巧(插件)辅助透视（新版有挂）-哔哩哔哩（UU poker、微扑克机...
第五真的有挂!雀神微信小程序免... 第五真的有挂!雀神微信小程序免费辅助器(辅助挂)太坑了原来真的有挂(有挂透明挂)-哔哩哔哩1、用户打...
第一个脚本!德扑之星软件模拟器... 第一个脚本!德扑之星软件模拟器(作弊)透视辅助（揭秘有挂）-哔哩哔哩；支持多人共享记分板与复盘，通过...
四个规律!wepoke科技(软... 四个规律!wepoke科技(软件透明挂)辅助挂（有挂猫腻）-哔哩哔哩；wepoke科技黑科技是一款具...
第三开挂(aapoker开发)... 第三开挂(aapoker开发)外挂透明挂辅助机制(透视)高科技教程(有挂讲解)-哔哩哔哩是一款可以让...