作成日: 2020/06/16 最終更新日: 2020/07/08
文書種別
制限事項
発生環境
IE11、旧Edgeでのみ発生
詳細
Menuにて、選択されている項目をヘッダーに表示するメニューをTabPanel内に配置している場合、メニューが表示されているタブから、異なるタブを選択して、再びメニューが表示されているタブを選択すると、メニューのヘッダーが空欄になってしまいます。
回避方法
下記２つの方法があります。
方法１： headerプロパティをバインディングして、WjMenuコンポーネントのheaderプロパティではなく、自身でバインドしたheaderモデルプロパティにheaderの値を指定する。
◆サンプルコード（HTML）
----------------------------------------------------
<wj-menu [header]="header" ... >
</wj-menu>
----------------------------------------------------
◆サンプルコード（TypeScript）
----------------------------------------------------
onSelectedMenuChanged(s, e) {
if (s.selectedItem) {
this.header = `Fruit: ${s.selectedItem[s.displayMemberPath]}`.
}
}
----------------------------------------------------
方法２：動的に生成された<wj-menu-item>コンポーネントを使用し、それらにvalueプロパティを定義する。
◆サンプルコード（HTML）
----------------------------------------------------
<wj-menu #mn2 [displayMemberPath]="'name'" [(value)]="menuValue" [header]="'Fruit: '">
<wj-menu-item *ngFor="let item of source" [value]="item.value">
{{item.name}}
</wj-menu-item>
</wj-menu>
----------------------------------------------------
方法１： headerプロパティをバインディングして、WjMenuコンポーネントのheaderプロパティではなく、自身でバインドしたheaderモデルプロパティにheaderの値を指定する。
◆サンプルコード（HTML）
----------------------------------------------------
<wj-menu [header]="header" ... >
</wj-menu>
----------------------------------------------------
◆サンプルコード（TypeScript）
----------------------------------------------------
onSelectedMenuChanged(s, e) {
if (s.selectedItem) {
this.header = `Fruit: ${s.selectedItem[s.displayMemberPath]}`.
}
}
----------------------------------------------------
方法２：動的に生成された<wj-menu-item>コンポーネントを使用し、それらにvalueプロパティを定義する。
◆サンプルコード（HTML）
----------------------------------------------------
<wj-menu #mn2 [displayMemberPath]="'name'" [(value)]="menuValue" [header]="'Fruit: '">
<wj-menu-item *ngFor="let item of source" [value]="item.value">
{{item.name}}
</wj-menu-item>
</wj-menu>
----------------------------------------------------
旧文書番号
85719