Question

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

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

但它没有被接受。我是以错误的方式做的，有没有其他方法可以动态添加CSS？

注 -

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

Answer 1

解决问题的最简单方法是为每个包含的元素分配一个唯一的ID，同时使用另一个变量来保存所选的ID。打开my-class CSS类的逻辑现在将基于所选的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;
  }
}

工作演示是here。

可以找到更多 here 。

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

如果您希望使用Angular2和MetaWidget，则应使用MetaWidget的兼容版本，可在此处找到 -

https://github.com/AmitsBizruntime/MetawidetA2

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

重新 -

Angular不能基于DOM工作，它基于Component工作。如果您喜欢使用DOM，那么您应该从这里将jQuery包含在tour angular项目中 -

How to use jQuery with Angular2?

但这不是一个好习惯。

使用MetaWidget在Angualr2中添加CSS属性

注 -

1 个答案:

重新 -