Низкая производительность при вводе материала чипа

Question

Я использую компонент Angular Material Chip для отображения микросхем с полем ввода ниже, чтобы пользователи могли добавлять новые микросхемы (ПРИМЕЧАНИЕ: это в диалоговом компоненте).Это работает просто отлично;тем не менее, производительность кажется ОЧЕНЬ низкой: как к тому времени, когда я набираю слово для нового чипа и нажимаю либо [ENTER], либо [COMMA], поле ввода остается пустым, имеется секунда или две задержки, а затемпоявляется чип (текст, который я набрал, на самом деле никогда не появляется в поле ввода при вводе, если я набираю очень медленно).

Я бы не подумал, что это как-то связано с моим ноутбуком (я работаю на совершенно новом MacBook Pro 2018 с 32 ГБ ОЗУ и процессором i9, так что я получил питание от вау-зоопарка).И все остальное на сайте очень отзывчиво (даже мой сервер звонит).Это почти похоже на то, что сам компонент замедляется, поскольку проверяет команду [COMMA] или [ENTER].

Я включил приведенный ниже код на случай, если какая-то оптимизация мне не хватает.Любая помощь будет принята с благодарностью:

** edit.component.html **

<div class="edit-container">
  <h3 mat-dialog-title>{{ this.getDateInfo() }}</h3>
  <form class="mat-dialog-content" #formControl="ngForm">
    <div>
      <label>Page: </label><a href="/page/{{ this.dataModel.pageid }}">{{ this.dataModel.pageid }}</a>
    </div>
    <div>
      <label>Value: </label><span>{{ getAmountInfo() }}</span>
    </div>
    <div class="mt10">
      <label>Entry Words:</label>
      <p>{{ this.dataModel.words.join(' ') }}</p>
    </div>
    <div>
      <label class="mb5">Categories:</label>
      <mat-chip-list #categoryList class="mt5 mb5">
        <mat-chip *ngFor="let c of this.dataModel.categories" color="primary" [removable]="true" (removed)="removeCategory(c)">
          {{ c }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
      <mat-form-field>
        <input matInput
               [matChipInputFor]="categoryList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="false"
               (matChipInputTokenEnd)="addChip($event)">
      </mat-form-field>

    </div>
    <div class="form-buttons mt10">
      <button mat-raised-button color="primary" (click)="saveChanges()" class="mr5">Save</button>
      <button mat-raised-button color="accent" (click)="cancelChanges()" class="ml5">Cancel</button>
    </div>
  </form>
</div>

** edit.component.ts **

import { Component, Inject } from '@angular/core';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { MAT_DIALOG_DATA, MatDialogRef, MatChipInputEvent } from '@angular/material';
import { TrainingData } from '../../../shared/models/training-data.model';
import { AdminService } from '../../../shared/services/admin.service';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.scss']
})
export class EditComponent {
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  constructor(public dialogRef: MatDialogRef<EditComponent>,
              @Inject(MAT_DIALOG_DATA) public dataModel: TrainingData,
              public adminService: AdminService ) {
  }

  addChip(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || '').trim()) {
      this.dataModel.categories.push(value.trim());
    }

    if (input) {
      input.value = '';
    }
  }

  getDateInfo(): string {
    const dateObj = new Date(this.dataModel.year, this.dataModel.month, 1);
    const monthName = dateObj.toLocaleString('en-uk', { month: 'long' });
    return `${monthName} ${this.dataModel.year}`;
  }

  saveChanges() {
    this.adminService.saveTrainingData(this.dataModel)
      .subscribe(
        x => console.log(x),
        err => console.log(err),
        () => console.log('item updated')
      );
    this.dialogRef.close(this.dataModel);
  }

  cancelChanges(): void {
    this.dialogRef.close();
  }

  getAmountInfo(): string {
    const real = this.dataModel.reales ? this.dataModel.reales : 0;
    const maravedi = this.dataModel.maravedises ? this.dataModel.maravedises : 0;
    return `${real}r ${maravedi}m`;
  }

  removeCategory(category: string) {
    this.dataModel.categories.splice(this.dataModel.categories.indexOf(category, 0));
  }

}