Angular 5 - Material Angular - Входы реагируют очень медленно на набор текста

Question

У меня проблема с реактивностью угловых элементов matInput в моем приложении.

Вот как структурировано мое приложение:

• У меня есть компонент SVG, в котором я рисую несколько элементов SVG, обернутых в угловые компоненты (квадраты, круги... и т. Д.), Используя ngFor.

• Каждая из этих форм SVG может открыть matMenu, чтобы пользователь мог настроить некоторые параметры, связанные с выбранной формой.

• Внутри этих matMenu у меня есть элементы mat-select или matInputs, которые позволяют мне редактировать параметры фигуры.

Вот часть html-кода menu-item-component, который используется в matMenu:

<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: он фильтрует то, что набрано во вводе, перед его отображением, и после 300 мс времени отката редактирует значение "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, чтобы уничтожить все компоненты (включая входы) внутри меню, когда оно закрыто. Я считаю, что все компоненты уничтожаются должным образом (проверено с помощью ngOnDestroy и console.log), но проблема остается.

• Я отписался для слушателей, когда компонент уничтожен. Без улучшения

• Я полностью удалил прослушиватель FormControl и отключил вход от остальной части приложения: у меня все еще есть проблема, хотя элемент ввода больше не связан ни с чем. Очевидно, что это не происходит от функций фильтрации или обновления. Это материальная проблема.

• Я читал, что была проблема с элементами cdk в Angular Material, и что одним из решений было включить режим производства. Я попробовал это, и проблема была существенно уменьшена. Однако я все еще замечаю, что со временем входы становятся менее реагирующими на ввод текста, и ясно, что если я удерживаю клавишу нажатой, она не будет отображать новое значение в реальном времени.

Кто-нибудь сталкивался с подобной проблемой? Любая идея о том, что еще я должен попробовать?

вот версии, которые я использую

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

Спасибо