我有一个两层的ngFor Angular模板。在ngFor内，我使用许多ngSwitchCase来选择要动态显示的HTML元素类型。
此页面成功显示了我想要的内容，但是此页面的渲染速度和操作在Chrome中有些慢，不是很快但是可以接受（但是在IE11中，使用起来太慢了...。）
<form #qaForm="ngForm">
<div *ngFor="let qa of qaList;let qIndex= index">
<div *ngIf="!qa.hide">
<div class="card-header bg-info text-white h5">
<label>{{'Q' + (qIndex+1) + '.'}}{{qa.question.questionContent}}</label>
</div>
<br>
<div [ngStyle]="caseQuestionsService.getStyle(ans)" *ngFor="let ans of qa.answers;let aIndex= index"
[ngSwitch]="ans.dataType">
<div *ngIf="!ans.hide">
<div *ngIf="isDependPage">
<h6><span class="badge badge-secondary">{{(qIndex+1) + '-' + (aIndex+1)}}</span></h6>
</div>
<div *ngSwitchCase="'displayfield'" class = "form-inline">
<label class="ma mr-1 ml-1">{{ans.answerContent}}</label>
</div>
<div *ngSwitchCase="'newline'">
<br>
</div>
<div *ngSwitchCase="'textfield'">
<input type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns"
(change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel" required>
</div>
<div *ngSwitchCase="'numberfield'">
<input type="number" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}"
[(ngModel)]="ans.typedAns" (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel"
required>
</div>
<div *ngSwitchCase="'textareafield'">
<textarea type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}"
[(ngModel)]="ans.typedAns" (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel"
required></textarea>
</div>
<div *ngSwitchCase="'singlecombobox'">
<select type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns"
(change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel" required>
<option [ngValue]="null">select</option>
<option *ngFor="let item of ans.answerContentAry" [ngValue]="item.value">{{
item.text
}}</option>
</select>
</div>
<div *ngSwitchCase="'singlecomboboxu'">
<!--editable single selects-->
<app-input-select class="form-control" [selectAry]="ans.answerContentStringAry" name="q-{{qIndex}}-answers-{{aIndex}}"
(click)="hideQAByIdx(qIndex, aIndex, ans.typedAns)" (change)="hideQAByIdx(qIndex, aIndex, ans.typedAns)" [(ngModel)]="ans.typedAns"
#answers="ngModel" required></app-input-select>
</div>
<div *ngSwitchCase="'multicombobox'">
<div class="row col">
<ng-multiselect-dropdown class="col-12" [placeholder]="'select'" [settings]="dropdownSettings"
[data]="ans.answerContentAry" (onSelect)="hideQAByIdx(qIndex, aIndex, answers)"
(onSelectAll)="hideQAByIdx(qIndex, aIndex, answers)" (onDeSelect)="hideQAByIdx(qIndex, aIndex, answers)"
name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns" #answers="ngModel"
required></ng-multiselect-dropdown>
</div>
</div>
<div *ngSwitchCase="'datePicker'">
<div class="input-group">
<input type="text" class="form-control col-9" ngbDatepicker #dpEnd="ngbDatepicker" name="q-{{qIndex}}-answers-{{aIndex}}"
(ngModelChange)="hideQAByIdx(qIndex, aIndex, answers)" [(ngModel)]="ans.typedAns"
#answers="ngModel" required>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" tabindex="-1" (click)="dpEnd.toggle()">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div>
</div>
<div *ngSwitchCase="'dateTimePicker'">
<div class="input-group">
<input type="text" class="form-control col-9" appDateTimePicker #dpEnd="appDateTimePicker"
(ngModelChange)="hideQAByIdx(qIndex, aIndex, answers)" name="q-{{qIndex}}-answers-{{aIndex}}"
[(ngModel)]="ans.typedAns" #answers="ngModel" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" tabindex="-1" (click)="dpEnd.toggle()">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div>
</div>
<div *ngSwitchCase="'customization'">
<input type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns"
(change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel" required>
</div>
</div>
</div>
</div>
</div>
</form>
getStyle（ans）
public getStyle(ans) {
let display = '';
let width = '';
if (
ans.dataType !== 'newline' &&
ans.dataType !== 'textareafield' &&
ans.dataType !== 'multicombobox'
) {
width = 'fit-content';
display = 'inline-block';
}
return { display: display, width: width };
}
我正在考虑两种方法来提高此页面的速度，但是我不确定它们。
正在更改为使用ComponentFactoryResolver动态生成组件。 （我不确定是否会很快）
在Typescript中生成组合的静态HTML，然后将其加载到Angular模板中？ （我不确定具体的实现方式）
有人会在这两种方式上给我一些建议还是一个新建议？
谢谢您的帮助，谢谢。