Angular 2 *ngFor 选择/选项的性能问题

Question

我正在使用*ngFor 填充options 的<select></select>。我的问题是我的 6 个 <select> 中的 1 个可以有 1000 数组值。性能是痛苦的。我知道这是因为changeDetection 或One-way Binding。有没有办法更好地为<option> 实现*ngFor。我实际上不需要change detection 或one-way binding。

我的代码

<select [formControl]="requestForm.controls['SellCommodityId']">
   <option [value]="" disabled selected>COMMODITY/GRADE</option>
   <option [value]="item.Id" *ngFor="let item of fieldOptions?.Product;">{{item.Value}}</option>                
</select>

2016 年 12 月 20 日更新

我将选择放入它的一个组件中，如下所示：

import { Component, ChangeDetectionStrategy,Input } from '@angular/core';
/**
 * <ihda-select [list]="list" [control]="control" [titleOption]="title"></ihda-select>
 */
@Component({
  selector:'ihda-select',
  changeDetection:ChangeDetectionStrategy.OnPush,
  template:`
    <select [formControl]="control" class="form-control">
       <option [value]="" disabled selected>{{titleOption}}</option>
       <option [value]="item.Id" *ngFor="let item of list">{{item.Value}}</option>                
     </select>
  `,
  styleUrls: ['../app.component.css']
})
export class IHDASelect{
    @Input() list: any[];
    @Input() control: any;
    @Input() titleOption: string;
}

性能问题仍然存在。

似乎不是changeDetection，因为我尝试从<select> 中删除[formControl] 属性，然后不再出现性能问题。似乎使用用于跟踪表单组的[formControl] 属性会导致性能问题。有这方面的信息吗？或者我该如何解决？

2016 年 12 月 21 日更新

这里的 plunker 中显示的性能问题：

https://plnkr.co/edit/2jNKFotBRIIytcmLto7y?p=preview

如果您点击Options Route，加载选项需要很长时间。如果您删除表单代码，则路由不会花费很长时间来加载。

Answer 1

When the Options route is selected all <options> for all <select> are rendered in one go before the application responds again.

为了避免 <options> 的渲染可能会延迟，以便它们仅按需渲染

<select [formControl]="control" class="form-control" (focus)="hasFocus = true">
   <option [value]="" disabled selected></option>
   <ng-container *ngIf="hasFocus">
     <option [value]="item.id" *ngFor="let item of list">{{item.value}}</option>                
   </ng-container>
</select>

https://plnkr.co/edit/KRgYHktFXHyPugS3nPQk?p=preview

该策略可以进一步优化，以便将hasFocus 设置为true，在组件已经一次显示一个<select> 之后延迟一个计时器，以便在浏览器空闲时它已经呈现<option>s.

Answer 2

如果您当前组件的更改检测不是 OnPUsh ，您可以将此选择包装在一个组件中并将其设置为 OnPush 并将产品列表传递给它以供使用。

@Component({

  selector:'my-select',
  changeDetection:ChangeDetectionStrategy.OnPush,
  inputs:['list','control'],
  template:`
    <select [formControl]="control">
       <option [value]="" disabled selected>COMMODITY/GRADE</option>
       <option [value]="item.Id" *ngFor="let item of list">{{item.Value}}</option>                
     </select>

  `
})

export class MySelectCompoent{

}

然后使用它：

   <my-select [control]='requestForm.controls['SellCommodityId']' [list]='fieldOptions?.Product'></my-select>

那么谁提供列表，如果想要更新它，应该替换它。