Если модальное устройство отправляет большие данные через initialState в дочерний модальный режим, это замедляет производительность модального режима.

Question

supplier-parent-modal.component.html

Это просто таблица начальной загрузки, которая содержит имена существующих поставщиков, которые будут отображаться.Это родительский модал.

<button type="button" class="btn btn-primary btn-sm add-btn float-right" *ngIf="mode === 'ADD_MODE'" (click)="openAllSuppliers(modalLoadAllSuppliers)">
        <i class="fas fa-plus"></i> &nbsp;New Supplier
      </button>
      <table class="table view-table" style="table-layout: fixed;">
        <thead class="bg-light">
          <tr>
            <th scope="col" width="45%">Supplier Name</th>
            <th scope="col">Supplier Number</th>
            <th scope="col" class="text-center" *ngIf="mode === 'ADD_MODE'">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of newDealSuppliers; let i = index">
            <td>
              <a href="javascript:" title="Supplier needs rescreening.">
                {{ item.VENDOR_NAME }}
              </a>
            </td>
            <td>
              <a href="javascript:"> {{ item.VENDOR_NUMBER }} </a>
            </td>
            <td class="text-center" *ngIf="mode === 'ADD_MODE'">
              <button type="button" class="btn btn-danger btn-sm" title="Delete Supplier" (click)="onDeleteSupplier(i)">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>

          <tr *ngFor="let item of dealSuppliers; let i = index">
            <td>
              <a href="javascript:" title="Supplier needs rescreening.">
                {{ item.VENDOR_NAME }}
              </a>
            </td>
            <td>
              <a href="javascript:"> {{ item.VENDOR_NUMBER }} </a>
            </td>
            <td class="text-center" *ngIf="mode === 'ADD_MODE'">
              <button type="button" class="btn btn-danger btn-sm" title="Delete Supplier" (click)="onDeleteSupplier(i)">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>

дочерний модальный поставщик (вложенный модал)

Он также присутствует на той же родительской html-странице, что идочерний / вложенный модал.Таким образом, при нажатии родительской кнопки openAllSuppliers этот дочерний модал загрузит более 2000 строк в таблицу.В modalService, если я даю {initialState: this.allSuppliers}, дочернее модальное время занимает открытие (около 15 секунд), а также если я нажимаю флажок в таблице, это занимает много времени, чтобы проверить состояние в представлении.Все события требуют времени.

<ng-template #modalLoadAllSuppliers>
  <div class="modal-header bg-primary text-white">
    <h5 class="modal-title pull-left">
      <img src="../../../assets/images/icone-32-d-deal.svg" width="32" alt="" />
      <span class="modal-title-text">Select Suppliers </span>
    </h5>
    <button type="button" class="close pull-right modal-btn-close" aria-label="Close" (click)="onCancelSupplier()">
      <span aria-hidden="true" class="modal-close-x">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="container-fluid">

      <div class="row" style="overflow-x: hidden;height: calc(55vh - 100px);">
        <div class="col">
          <div class="table-responsive">
            <table class="table view-table" *ngIf="allSuppliers?.length > 0 ? allSuppliers?.length : 0">
              <thead class="bg-light">
                <tr>
                  <th scope="col" width="50px">#</th>
                  <th scope="col">Supplier Number</th>
                  <th scope="col">Supplier Name</th>
                  <th scope="col">Country</th>
                  <th scope="col">City</th>
                  <th scope="col">Address</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of allSuppliers">
                  <td>
                    <span class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="{{item.VENDOR_NUMBER}}" (change)="onSelectSupplier($event, item)" />
                      <label class="custom-control-label" for="{{item.VENDOR_NUMBER}}"></label>
                    </span>
                  </td>
                  <td>{{ item.VENDOR_NUMBER }}</td>
                  <td>{{ item.VENDOR_NAME }}</td>
                  <td>{{ item.COUNTRY }}</td>
                  <td>{{ item.CITY }}</td>
                  <td>{{ item.ADDRESS }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="onCancelSupplier()" style="border: 1px solid #e1e0e0;">
      Discard
    </button>
    <button type="button" class="btn btn-primary" (click)="onAddSupplier()">
      Add
    </button>
  </div>
</ng-template>

Может кто-нибудь, пожалуйста, помогите мне, что не так в моем подходе.Это действительно очень простая концепция, но я не знаю, почему столько времени уходит на загрузку.

вот мой компонент: родительский модальный компонент component.ts file

openAllSuppliers(template: TemplateRef<any>) {
this.modalAllSuppliers = this.modalService.show(template, {
  backdrop: false,
  class: 'modal-dialog-centered modal-xlg',
  ignoreBackdropClick: true,
  initialState: this.allSuppliers // more than 2000 records
});

}