-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%);
}

これが読み込まれると、選択したクラスが適用され、期待どおりに画像が灰色になります。

ただし、次の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);
  }
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

を使ってみることができますng-class。

ドキュメントはこちら

簡単な例

于 2016-08-04T09:39:01.017 に答える
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 に答える