角度5-材质角度-输入对输入的反应非常慢

Question

我的应用程序中的角度matInput元素的反应性有问题。

这是我的应用程序的结构：

• 我有一个SVG组件，其中我使用ngFor绘制了一些包裹在角组件（正方形，圆形等）中的SVG元素。

• 这些SVG形状中的每个形状都可以打开matMenu，以便用户配置附加到所选形状的一些参数。

• 在这些matMenu中，我具有mat-select或matInputs元素，可用来编辑形状的参数。

这是matMenu中使用的menu-item-component html代码的一部分：

<ng-container [ngSwitch]="interfaceType">

  <mat-list-item *ngSwitchCase="'input'">
    <form autocomplete="off">
      <mat-form-field>
        <input matInput
               [placeholder]="paramDisplayName"
               [value]="paramValue"
               [formControl]="inputValue">
      </mat-form-field>
    </form>
  </mat-list-item>

  <mat-list-item *ngSwitchCase="'select'">

...........

输入组件具有FormControl侦听器

在ValueChanges上：它会在显示输入内容之前对其进行过滤，并且在经过300ms的消除时间之后，会通过高级服务来编辑“ paramValue”的值。

    this.inputValue = new FormControl();
    this.inputValueSubscription = this.inputValue.valueChanges
      .map(val => this.filterValue(val))
      .do(val => { this.inputValue.setValue(val, { emitEvent: false }); }) 
      .debounceTime(300)
      .subscribe(val => { this.updateParamValue(val); }); 

代码正常工作。但是...

...当我启动应用程序时，首先，输入是非常快速的。例如，我可以按住该键，它将在输入中立即显示实时值。

但是在打开和关闭不同SVG形状的菜单并对其进行编辑几分钟后，输入开始变得越来越慢……而且非常慢……直到输入做出反应并显示需要1到2秒输入的值。

这是我尝试过的：

• 我用ngIf包裹了mat-menus的内容，以便在关闭菜单时销毁菜单内的所有组件（包括输入）。我相信所有组件都已被正确销毁（已通过ngOnDestroy和console.log进行了检查），但仍然存在问题。

• 组件被销毁时，我取消了对侦听器的订阅。没有改善

• 我完全删除了FormControl侦听器，并从应用程序的其余部分断开了输入：尽管输入元素不再与任何东西连接，但仍然存在问题。显然，它不是来自过滤或更新功能。这是重大问题。

• 我读到Angular Material中的cdk元素存在问题，一种解决方案是启用生产模式。我尝试了一下，问题大大减少了。但是，我仍然注意到，随着时间的流逝，输入对键入的反应越来越少，而且很明显，如果我按住该键，它将不会实时显示新值。

有人遇到过类似的问题吗？ 关于我还应该尝试什么的任何想法？

这是我使用的版本

"dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.5",
    "@angular/material": "^5.2.5",

谢谢