使用 MetaWidget 在 Angualr2 中添加 CSS 属性

Question

我试图在单击 table 的行或列时添加 CSS，以下是代码

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

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

注-

有什么方法可以使用 dom 元素添加 CSS，我的 table 有数以千计的数据并创建这个 table，我使用了 MetaWidget.

Answer 1

解决您的问题的最简单方法是为每个包含的元素分配一个唯一的 ID，并使用另一个变量来保存选定的 ID。开启 my-class CSS class 的逻辑现在将基于所选的 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 包含在游览 angular 项目中-

但这不是一个好的做法。

使用 MetaWidget 在 Angualr2 中添加 CSS 属性

Add CSS property in Angualr2 with MetaWidget

css

metawidget

angular

注-

重新