风格设定但未更改

Question

更新：我已经在Angular中读到过，你无法操纵DOM。你应该做什么，最佳做法是什么？我尝试过使用超时，NgZone，ChangeDetectionStrategy.OnPush，ChangeDetectorRef detectChanges（）都没有成功。

我有一个 html img元素：

<img class="selected" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" />

和一些 sccs ：

img.selected {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

加载时，它会应用所选的类，并使图像按预期变灰。

但是，当我运行以下 typescrpt 时，图片会保持灰色：

let imgEl: HTMLElement = document.getElementById('icon-image-' + subCategoryModel.id);
imgEl.className = "";

当我记录className时，它显示之前是选中的，并且在之后被删除。

console.log(imgEl.classList);

任何想法为什么，即使我删除了一个className，样式也没有反映出来？

当我查看源代码时，它没有更新DOM，但是imgEl.classList正在被更改。你知道为什么吗？

由于

更新：

奇怪的是，如果我手动更改DOM中的className（例如在Firebug中），它会反映出更改。但是，只要我单击图像，它就会更新原始值。就像DOM正在刷新一样。

如果是这种情况，那么如何动态更新DOM呢？因为DOM刷新只会覆盖所有更改。

HTML

  <ion-row *ngFor="let trio of getTriples()">
    <ion-col *ngFor="let item of trio" (click)="itemTapped(item)">
      <center>
      <div class="row responsive-md">
        <img class="selected" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" />
      </div>
      </center>
    </ion-col>
  </ion-row>

打字稿

  itemTapped(subCategoryModel: SubCategoryModel) {
    let idx: number = this.isInArray(this.employeeModel.subCategories, subCategoryModel);
    let imgEl: HTMLElement = document.getElementById('icon-image-' + subCategoryModel.id);
    if (idx >= 0) {
      this.employeeModel.subCategories.splice(idx, 1);
      imgEl.setAttribute("class", "");
    } else {
      this.employeeModel.subCategories.push(subCategoryModel);
      imgEl.setAttribute("class", "selected");
    }
    console.log('icon-image-'+subCategoryModel.id+' ('+imgEl.id+'): ' + document.getElementById('icon-image-' + subCategoryModel.id).className);
  }

Answer 1

尝试为元素指定一个取消选择的类。

添加所需的css。

有点像这样

let imgEl: HTMLElement = document.getElementById('icon-image-' subCategoryModel.id);
imgEl.className = "deselected";

CSS

img.deselected {
  /* your css here */
}

Answer 2

您可以尝试使用ng-class。

Documentation here

A simple example

Answer 3

这是一个解决方案：

<强> HTML

      <img class="item-stable" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" (click)="toggleItem(item)" [class.item-selected]="item === itemShown"/>

<强> TS

  isItemShown(item: SubCategoryModel) {
    return this.itemShown === item;
  }

  toggleItem(item: SubCategoryModel) {
    if (this.isItemShown(item)) {
      this.itemShown = null;
    } else {
      this.itemShown = item;
    }
  }