Проблема производительности при использовании с угловыми материалами, охватывающими ряды

Я использую таблицу материалов Angular. Когда мы переключаемся из режима просмотра в режим редактирования, требуется время, а при переключении в любой режим происходит задержка. (Проблема производительности).

Это занимает время только при использовании функции Rowspan в таблице материалов Angular с режимом встроенного редактирования, в противном случае все в порядке.

Как мы можем улучшить производительность этого?

или

Есть ли другое решение?

<pre>
  <form [formGroup]="formGroup"> 
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">   
       <ng-container matColumnDef="asset" sticky>  
            <th mat-header-cell *matHeaderCellDef> Asset </th>  
               <td mat-cell *matCellDef="let data; let i = index"     [attr.rowspan]="getRowSpan('assetType', i)"     [style.display]="getRowSpan('assetType', i) ? '' : 'none'"     [formGroup]="data" class="asset-column"> {{data.get('assetType').value}}</td>  
               </ng-container>   
                <ng-container matColumnDef="type" sticky>    
                   <th mat-header-cell *matHeaderCellDef class="custom-type"> Type </th>    
                    <td mat-cell *matCellDef="let data; let i = index"      [formGroup]="data" class="custom-type-cell {{data.get('type').value === 'Status' ? 'Status' : ''}}">{{data.get('type').value === 'Status' ? 'Cause' : data.get('type').value}}</td> 
                    </ng-container>    
                    <ng-container *ngFor="let col of columnNumbers">     
                      <ng-container matColumnDef="{{col}}">       
                        <th mat-header-cell *matHeaderCellDef class="number-column"> {{col}} </th>       
                        <td mat-cell *matCellDef="let data; let i=index" [formGroup]="data" (contextmenu)="onContextMenu($event, data, data.get(col).value, true)" class="number-cell {{data.get('type').value === 'Status' ? 'Status' : ''}}">   
                                <span *ngIf="!isTableEdit"> 
                                  {{data.get(col).value}}
                                </span>          
                                <!-- Input field to enter the value -->         <mat-form-field *ngIf="isTableEdit && isStatusEditable(data)">          
                                   <input matInput formControlName="{{col}}" (input)="updateStatusDropdowns()" appZeroOneDecimalRange>        
                                   </mat-form-field>      
                                   </td>     
                                  </ng-container>  
                                 </ng-container>   
                                 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> 
                                   <tr mat-row *matRowDef="let row; columns: displayedColumns; sticky: true"></tr> 
                                  </table> 
                                </form>
</pre>