输入数据显示非常慢

Question

我现在正在使用一个 Angular 应用程序，每当我输入任何输入时都会出现错误。

每当我输入一个字母/单词时，输入似乎都冻结了，并且直到 5 秒左右之后才显示我写的字母。这个时间增加的时间越长，我不用等待就写了。 （如果我写3个字，这个时间可能会增加到6-7秒）

（请参阅 gif 以供参考：https://giphy.com/gifs/7GwjjFBSGn8iWTQTXv）

我认为这可能是由于其中一些事件发生了 onChange 事件，但即使是那些没有附加事件的事件也有相同的行为

这个组件有大约 12 个输入和一些其他的 html 组件（如果有的话）。

我感觉这与脏检查有关，但我真的不知道是否是这种情况。

这是我正在使用的组件的 HTML 和 TS

       <mat-form-field style="width:100%">
              <textarea
                matInput
                maxlength="4000"
                placeholder="Current Symptoms"
                [mention]="items"
                [mentionConfig]="{ triggerChar: '@', mentionSelect: onMentionSelect }"
                (opened)="getShortcuts(this.currentSymptomsRestriction)"
                name="symtoms"
                [(ngModel)]="examData.Exam.CURRENT_SYMPTOMS"
              ></textarea>
            </mat-form-field>




      <mat-form-field style="width:100%">
        <textarea
          matInput
          maxlength="4000"
          placeholder="Current History"
          name="currentHistory"
          [(ngModel)]="examData.Exam.CURRENT_HISTORY"
        ></textarea>
      </mat-form-field>

与 TS 相关的是：

import { Component, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
import {
  ExamData,
  ExamDrawColor,
  Exam,
  GensolveImage,
  PATIENT_ASSESSMENT,
  IExamData,
  ShortcutFilter
} from '@models/exam.models';
import { UtilService } from '@services/util.service';
import { environment } from '@environments/environment';
import { AdminType } from '@enums/system.enums';
import {
  ExamEnums,
  BodyDiagramType,
  PhysioProviderType,
  TextShortcutRestrictionType,
  ExamField
} from '@enums/exam.enums';
import { MatDialogRef } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import swal from 'sweetalert2';
import { StandardExam, SeverityOthers, IExamDynamic } from '@models/standard-exam';
import { PainDetailsComponent } from '../pain-details/pain-details.component';
import { TextShortcutComponent } from '../text-shortcut/text-shortcut.component';
import { SeverityOthersComponent } from '../severity-others/severity-others.component';
import { TextShortcut } from '@models/TextShortcut';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { InjuryTypeSelectorComponent } from '../injury-type-selector/injury-type-selector.component';
import { ShortcutsService } from '@services/shortcuts.service';
import { ExamService } from '@services/exam.service';

@Component({
  selector: 'subjective-exam',
  templateUrl: './subjective.component.html',
  styleUrls: ['./subjective.component.css']
})
export class SubjectiveComponent implements OnInit, IExamDynamic {
  public painDetails: PainDetailsComponent;
  public examData: StandardExam;

  public start_diagram: string;

  public sPainType: string = '';
  public sPainDescription: string = '';
  public subjective_diagram: string;
  public handednessOptions: Array<any>;
  public severityText: SeverityOthers;

  public bodyDiagram: GensolveImage;
  public bodyDiagramColors: Array<ExamDrawColor>;
  public bodyBackground: string;

  public bodyPartDiagram: GensolveImage;
  public bodyPartBackground: string;

  public dailyDiagram: GensolveImage;

  public shortcut: TextShortcut;
  public restrictions: Number[];
  public currentSymptomsRestriction: number;
  public mechanismRestriction: number;
  public factorRestriction: number;
  public items: string[] = [];

  public shortcuts: TextShortcut[];
  public ExamField = ExamField;

  public isUk: boolean;

  public bodyPartLabel: string;
  public bodyPartColors: Array<ExamDrawColor>;
  public disableForm: boolean;
  @ViewChild('injurySelector') injurySelector: InjuryTypeSelectorComponent;
  constructor(
    protected utilService: UtilService,
    protected cd: ChangeDetectorRef,
    protected shortcutsService: ShortcutsService,
    protected examService: ExamService
  ) {
    this.start_diagram = 'body';
    this.items = [' '];
  }

  ngOnInit() {
    this.examData = new StandardExam();
    this.loadHandednessOptions();
    this.loadRestrictions();
    this.severityText = { irritability: '', severity: '', nature: '', stage: '' };
    this.isUk = environment.phisyio_country === 'UK' ? true : false;
    this.disableExam();
  }

  public setExamData(examData: StandardExam) {
    this.examData = examData;
    this.sPainDescription = PainDetailsComponent.GetPainDetailsText(examData.Exam);
    this.severityText = SeverityOthersComponent.GetDescription(examData.Exam);
    this.sPainType = PainDetailsComponent.GetPainTypeText(examData.Exam);
    this.setDiagramInfo();
    this.cd.detectChanges();
    if (this.injurySelector != undefined) {
      this.injurySelector.setExamData(this.examData);
    }
    this.disableExam();
  }




  loadRestrictions() {
    this.currentSymptomsRestriction = TextShortcutRestrictionType.CurrentSymptoms;
    this.mechanismRestriction = TextShortcutRestrictionType.Mechanism;
    this.factorRestriction = TextShortcutRestrictionType.AggravatingFactors;
  }

  getShortcuts(fieldRestriction: number) {
    let filters = new ShortcutFilter();
    filters.INJURY_TYPE = this.examData.Exam.INJURY_TYPE;
    filters.SECONDARY_INJURY_TYPE = this.examData.Exam.SECONDARY_INJURY_TYPE;
    filters.INJURY_TYPE3 = this.examData.Exam.INJURY_TYPE3;
    filters.INJURY_TYPE4 = this.examData.Exam.INJURY_TYPE4;

    this.restrictions = this.shortcutsService.GetRestrictionsForExam(filters, fieldRestriction);
    this.items = [];
    let newItems = [];
    this.examService.GetTextShortcuts(this.restrictions).subscribe(response => {
      this.shortcuts = response as Array<TextShortcut>;
      this.shortcuts.forEach(shortcut => {
        newItems.push(shortcut.BUTTON_TEXT + ' - ' + shortcut.DISPLAY_TEXT);
      });
      this.items = this.items.concat(newItems);
    });
  }

  onMentionSelect(selection): string {
    return selection.label.substring(selection.label.indexOf('- ') + 2);
  }



 
}