Проблема:
У меня есть двухслойный ngFor угловой шаблон. Внутри 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 для динамического создания компонента. (Я не уверен, что это будет быстро или нет)
Создание составного статического HTML в Typescript и загрузка их в шаблон Angular? (Я не уверен насчет подробной реализации)
Кто-нибудь даст мне несколько советов по поводу этих двух способов или новое предложение ?
Спасибо за вашу помощь, Спасибо.