-1

更新：我在 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%);
}

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

但是，当我运行以下类型时，图像只是保持灰色：

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

当我记录 className 时，它​​显示 selected 之前存在，之后已被删除。

console.log(imgEl.classList);

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

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

谢谢

更新：

奇怪的是，如果我手动更改 DOM 中的类名（例如在 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);
  }
4

3 回答 3

1

这是一个解决方案：

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;
    }
  }
于 2016-08-04T14:57:37.907 回答
0

尝试为元素分配一个取消选择的类。

向其中添加所需的 css。

有点像这样

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

css

img.deselected {
  /* your css here */
}
于 2016-08-04T06:54:18.557 回答
0

您可以尝试使用ng-class.

文档在这里

一个简单的例子

于 2016-08-04T09:39:01.017 回答