Angular 2*ng对于select/option的性能问题

Question

我使用的是*ngFor填充options的<select></select>.我的问题是我可以拥有10006个中的1个的数组值<select>.表现很痛苦.我知道这是因为changeDetection或One-way Binding.有没有更好地实施的方式*ngFor进行<option>.我实际上并不需要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>

更新12-20-2016

我将select放入其中的一个Component,如下所示:

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,因为我尝试从中删除[formControl]属性<select>,然后不再存在性能问题.似乎使用[formControl]此处的属性来跟踪表单组会导致性能问题.有关于此的信息吗？或者我如何解决它？

更新12-21-2016

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

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

如果单击Options Route它将需要很长时间才能加载选项.如果删除表单代码,则路由不会花费很长时间来加载.

Answer 1

当Options选择路由所有<options>所有<select>一气呵成应用程序之前再次响应被渲染.

为了避免<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.