作成日: 2019/06/27 最終更新日: 2019/06/27
文書種別
不具合
発生環境
Chromeのみで発生
状況
回避方法あり
詳細
AngularでwjFlexGridCellTemplateを使用して追加したHTML要素に「ngClass」ディレクティブを設定し、HTML要素のスタイルを実行時に動的に変更するようにしても、初期表示時には機能しません。
例えば、下記のようにテンプレートを設定し、列ヘッダのmouseoverイベントとmouseoutイベントでスタイルを変更するコードを実装しても、列ヘッダにマウスオーバーしたときにスタイルが変更されません。
◆サンプルコード
------------------------------------------------------------
<ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-item="item">
<span>ヘッダ</span>
<span [ngClass]="mystyle" (mouseover)="onMouseOver()" (mouseout)="onMouseOut()"></span>
<span *ngIf="mystyle.styleA">マウスオーバー中</span>
</ng-template>
------------------------------------------------------------
例えば、下記のようにテンプレートを設定し、列ヘッダのmouseoverイベントとmouseoutイベントでスタイルを変更するコードを実装しても、列ヘッダにマウスオーバーしたときにスタイルが変更されません。
◆サンプルコード
------------------------------------------------------------
<ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-item="item">
<span>ヘッダ</span>
<span [ngClass]="mystyle" (mouseover)="onMouseOver()" (mouseout)="onMouseOut()"></span>
<span *ngIf="mystyle.styleA">マウスオーバー中</span>
</ng-template>
------------------------------------------------------------
回避方法
以下のいずれかの方法で回避できます。
回避方法１：
Angularへの変更通知を手動で実行します。
◆サンプルコード
------------------------------------------------------------
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) {}
------------------------------------------------------------
各イベントでの設定変更後に変更通知を実行します。
◆サンプルコード
------------------------------------------------------------
this.cdr.detectChanges();
------------------------------------------------------------
回避方法２：
ngAfterViewInitでsetTimeoutを使用して、FlexGridのinvalidateメソッドを実行します。
◆サンプルコード
------------------------------------------------------------
ngAfterViewInit(){
setTimeout(()=>{
this.flex.invalidate();
})
}
------------------------------------------------------------
回避方法１：
Angularへの変更通知を手動で実行します。
◆サンプルコード
------------------------------------------------------------
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) {}
------------------------------------------------------------
各イベントでの設定変更後に変更通知を実行します。
◆サンプルコード
------------------------------------------------------------
this.cdr.detectChanges();
------------------------------------------------------------
回避方法２：
ngAfterViewInitでsetTimeoutを使用して、FlexGridのinvalidateメソッドを実行します。
◆サンプルコード
------------------------------------------------------------
ngAfterViewInit(){
setTimeout(()=>{
this.flex.invalidate();
})
}
------------------------------------------------------------
旧文書番号
84123