我正在学习 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;
}