Question

我正在使用Angular Material Chip组件显示芯片，下面带有一个输入框，供用户添加新芯片（注意：这是在对话框组件中）。它工作正常；但是，性能似乎非常慢：当我键入新芯片的单词并按[ENTER]或[COMMA]时，输入框仍为空白，其中有1或2滞后，然后出现筹码（除非我输入速度非常慢，否则我输入的文本实际上不会在输入时出现在输入框中）。

我认为这与我的笔记本电脑没有任何关系（我正在运行具有32GB RAM和i9处理器的全新2018 Macbook pro，因此我已经没电了。）网站上的其他所有内容都非常敏感（甚至我的服务器呼叫）。在检查[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));
  }

}

材料芯片输入的性能降低

0 个答案: