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

Question

我正在使用 *ngFor填充 options的 <select></select> .我的问题是我可以拥有 1000我的 6 个中的 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>

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 ，因为我尝试删除 [formControl]来自 <select> 的属性然后不再有性能问题。 似乎使用 [formControl]此处的属性以跟踪它的表单组会导致性能问题。有这方面的资料吗？或者我该如何解决？

2016 年 12 月 21 日更新

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>