Angular ng5滑块高值设置在错误位置

我在mat菜单中使用ng5滑块，但每个滑块的高值设置在错误的位置，而不是滑块的边缘

我尝试了一些解决办法。 但它不起作用

---

在

上有一个例子，当我在

MatDialog

中使用ng5滑块时，我遇到了同样的问题。我通过在

MatDialogRef

的

afterOpened

订阅中手动刷新解决了这个问题

---

我建议您订阅菜单触发器的

菜单打开的
事件发射器，并在那里进行手动刷新。
我也面临同样的问题。只需将超时时间增加到200，它就解决了

import { Component, OnInit, EventEmitter } from '@angular/core';
import { Options } from 'ng5-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  displayMenu = true;
filterElement = [
      {
        value: 0,
        highValue: 15,
        options: {
          floor: 0,
          ceil: 15,
          step: 0.1
        },
      },
      {
        value: 1,
        highValue: 1200,
        options: {
          floor: 1,
          ceil: 1200,
        },
      }];
  manualRefresh: EventEmitter<void> = new EventEmitter<void>();

  ngOnInit() {
  }
  noClickable($event: MouseEvent) {
    $event.stopPropagation();
  }
  onMenuOpen() {
      this.displayMenu = true;
  }
  menuToggle(value: boolean) {

    setTimeout(() => {
        console.log('Test');
        this.manualRefresh.emit();
    }, 200);

  }
}

从'@angular/core'导入{Component，OnInit，EventEmitter}；
从“ng5滑块”导入{Options}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
displayMenu=true；
filterElement=[
{
值：0，
高值：15，
选项：{
楼层:0,，
中欧：15，
步骤：0.1
},
},
{
价值：1，
高值：1200，
选项：{
发言：1，
ceil:1200，
},
}];
manualRefresh:EventEmitter=新的EventEmitter（）；
恩戈尼尼特（）{
}
不可点击（$event:MouseEvent）{
$event.stopPropagation（）；
}
onMenuOpen（）{
this.displayMenu=true；
}
菜单切换（值：布尔值）{
设置超时（（）=>{
console.log（'Test'）；
这个.manualRefresh.emit（）；
}, 200);
}
}

这里是资源链接，我刚刚将超时从100更改为200


该问题是由于角度动画造成的，可以通过将
app.module.ts
文件中的
NoopAnimationsModule
替换为
NoopAnimationsModule
来解决。缺点是整个应用程序中没有任何动画

见下文

理想情况下，应该可以为特定的
mat菜单禁用动画，就像对其他组件禁用动画一样（请参阅）。
不幸的是，对于
mat菜单
，这还不起作用，但存在一个打开的