1

问题：

我有一个两层的ngForAngular 模板。在 内部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>

获取样式（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 };
    }

我在想 ...

我正在考虑两种方法来提高此页面的速度，但我不确定它们。

  1. 更改为用于ComponentFactoryResolver动态生成组件。（我不确定这是否会很快）

  2. 在 Typescript 中生成一个组合的静态 HTML，然后将它们加载到 Angular 模板中？（我不确定具体的实现）

有人会给我一些关于这两种方式的建议或新的建议吗？

谢谢你的帮助，谢谢。

4

0 回答 0