Question

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

我的代码

one-way binding

更新12-20-2016

我将select放入其中的一个Component：

<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>

效果问题仍然存在。

好像不是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>属性来跟踪表单组会导致性能问题。有关于此的信息吗？或者我如何解决它？

更新12-21-2016

此处的plunker中显示的性能问题：

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

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

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。

Answer 2

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

@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>

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

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

更新12-21-2016

2 个答案: