如果模态通过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按钮的onclick上，此子模式将在表中加载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文件

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
});

}