Angular 2 * ng For performance issue with choice / option

Question

I use *ngFor to populate options from <select></select> . My problem is that I can have array values ​​of 1000 for 1 of my 6 <select> . Productivity is suffering. I know this because of changeDetection or One-way Binding . Is there a better way to implement *ngFor for <option> . I really don't need change detection or One-way Binding .

My code

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

UPDATE 12-20-2016

I put one component similar to this in it:

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

The performance issue persists.

It didn't changeDetection like it was a changeDetection because I tried removing the [formControl] attribute from <select> and then there was no longer a performance issue. It seems that using the [formControl] attribute here to track it for a group of forms is causing a performance problem. Is there any information about this? or how can i fix this?

UPDATE 12-21-2016

Performance error shown here in the plunter:

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

If you click Options Route , it takes a long time to load the parameters. If you delete the form code, the route does not take much time.

Answer 1

When you select the Options route, all <options> for all <select> displayed at a time until the application answers again.

To avoid that the rendering of <options> may be delayed so that they only appear on demand

 <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

The strategy can be further optimized, so that hasFocus set to true with a timer delay after the component is already shown for one <select> at a time, so that while the browser is not working, it already displays <option> s.

Answer 2

If your current component change detection is not OnPUsh, you can wrap this selection inside the component and make it one of OnPush and pass the list of products that it will use.

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

Then, to use it:

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

Then, who ever provides a list, if he wants to update it, he must replace it.