0

我正在学习 Angular,并第一次尝试使用 NgSelect。而且我注意到,如果我将 dropdownValues 用作 [items],则每次鼠标指针悬停在选择中的任何选项上时,或者每次打开和关闭选择控件时,它都会在控制台“dropdownValues”中显示,等等。只需移动指针快速超过选项无论我使用 _dropdownValues 还是 dropdownValues,我都会在 CPU 上获得 15-20% 的负载。这里发生了什么?为什么 NgSelect 每次我做一些不应该成为重新渲染或再次检索 [items] 的原因时都需要检索 [items]。我可以做些什么来优化我的代码,使其不会加载这么多 CPU?

  <ng-select [items]="_dropdownValues" bindValue="value" [(ngModel)]="name"></ng-select>
  <ng-select [items]="dropdownValues" bindValue="value" [(ngModel)]="name"></ng-select>

  @Component({
    selector: 'testcomponent',
    templateUrl: './testcomponent.html'
  })
  export class TestComponent {
    _dropdownValues: DropdownOption[] = [];
    get dropdownValues() {
      console.log("dropdownValues");
      return this._dropdownValues;
    }
    constructor() {
      for (var i = 0; i < 150; i++) {
        this._dropdownValues.push({ value: i.toString(), label: "Test" + i });
      }
    }
  }

  export interface DropdownOption {
    value: string;
    label: string;
  }
4

0 回答 0