1

单击表格的行或列时，我正在尝试添加 CSS，以下是代码

private rowClicked(event: Event): void {
   event.srcElement.setAttribute("class", "highlighted");
}

但它没有像接受的那样工作。我做错了，有没有其他方法可以动态添加 CSS？

笔记-

有没有办法使用 dom 元素添加 CSS，我的表有数千个数据，为了创建这个表，我使用了 MetaWidget。

4

1 回答 1

2

解决问题的最简单方法是为每个包含的元素分配一个唯一 ID，同时使用另一个变量来保存选定的 ID。现在，打开my-classCSS 类的逻辑将基于所选 ID。

您的新 HTML 模板：

<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
  > I'm a div that gets styled on click
</div>

你的rowClicked功能：

highlightedDiv: number;

rowClicked(newValue: number) {
  if (this.highlightedDiv === newValue) {
    this.highlightedDiv = 0;
  }
  else {
    this.highlightedDiv = newValue;
  }
}

一个工作演示在这里。

更多可以在这里找到。

您正在使用MetaWidget，但您没有提及您正在使用的版本。

如果你想使用Angular2和MetaWidget，你应该使用MetaWidget的兼容版本，可以在这里找到 -

https://github.com/AmitsBizruntime/MetawidetA2

使用此库将是您的最佳解决方案。

回覆-

Angular 不是基于 DOM 工作的，它是基于 Component 工作的。如果你喜欢在 DOM 上工作，那么你应该从这里将 jQuery 包含在 Tour Angular 项目中——

如何在 Angular2 中使用 jQuery？

但这不是一个好习惯。

于 2017-03-17T05:13:36.703 回答