我正在使用* ngFor来填充< select>< / select>的选项.我的问题是我可以为我的6< select>中的1个拥有1000个数组值.表现很痛苦.我知道这是因为changeDetection或单向绑定.有没有办法更好地实现* ngFor for< option>.我实际上并不需要更改检测或单向绑定.
我的代码
<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,因为我尝试从< select>中删除[formControl]属性.然后不再存在性能问题.似乎在此处使用[formControl]属性来跟踪表单组会导致性能问题.有关于此的信息吗？或者我如何解决它？
更新2016年12月21日
当选择选项路线时,所有<选项>适用于所有< select>在应用程序再次响应之前一次性呈现.
原文链接：https://www.f2er.com/angularjs/141245.html为了避免渲染< 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
该策略可以进一步优化,以便在已经为一个< select>显示该组件之后,通过计时器将hasFocus设置为真.一次,所以当浏览器空闲时,它已经呈现<选项> s.
