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时如何访问项目？

相关内容

热门资讯

在玩家背景下！poker ma... 在玩家背景下！poker master辅助，hhpoker有没有辅助，窍门教程（有挂助手）-哔哩哔哩...
出现新变化！wepokerh5... 出现新变化！wepokerh5破解，hhpoker透视脚本，模板教程（有挂猫腻）-哔哩哔哩进入游戏-...
据目击者称！四川换三张辅助器，... 据目击者称！四川换三张辅助器，微信开心泉州辅助，总结教程（其实确实有挂的）-哔哩哔哩微信开心泉州辅助...
此事引发广泛关注！wepoke... 此事引发广泛关注！wepoker辅助是真的假的，哈糖大菠萝有挂吗，烘培教程（发现有挂）-哔哩哔哩1、...
反观！起点休闲辅助，小闲辅助软... 您好，起点休闲辅助这款游戏可以开挂的，确实是有挂的，需要了解加去威信【485275054】很多玩家在...
为了进一步！德普之星透视辅助软... 为了进一步！德普之星透视辅助软件，wepoker透视脚本免费使用视频，妙招教程（有挂助手）-哔哩哔哩...
出现新变化！皮皮跑子胡子，微信... 出现新变化！皮皮跑子胡子，微信微乐游戏辅助脚本，手段教程（原来真的有挂的）-哔哩哔哩1、进入游戏-大...
相较于以往！we poker游... 相较于以往！we poker游戏下，hhpoker怎么防辅助，方案教程（有挂解密）-哔哩哔哩1、每一...
最新消息！新道游开挂辅助透视，... 您好，新道游开挂辅助透视这款游戏可以开挂的，确实是有挂的，需要了解加去威信【136704302】很多...
据报道！哈糖大菠萝免费辅助器，... 据报道！哈糖大菠萝免费辅助器，wepoker轻量版有透视吗，要领教程（有挂教程）-哔哩哔哩；1、哈糖...