html - 如何优化有角材料的表格

问题描述

我试图显示产品列表，它确实如此，但问题是它冻结了 6 或 8 秒，寄存器的大小是 2338，我使用实体框架来获取寄存器，一些解决或优化的想法

这是从其他类获取列表的方法，我从实体框架中获取

   
getProveedor(){
   
   this.apiproveedor.getProveedor().subscribe(response=>{
    
     console.log(response.data);
    if(response.exito==1){
      this.lst=response.data;
      this.resultsLength=this.lst.length;
      
      this.dataSource=response.data;
    }
     
      
   });
   

   
   getProveedor():Observable<Response>{
      
      return this._http.get<Response>(this.url);
      
    }
  this is the html, im using a mat table

<!--
-->
<div>
    <mat-toolbar >
        <span >Pharmacy Lion</span>
        
        <img src="./assets/img/2.png" class="tama">
        
    </mat-toolbar>        

    <div>
        <a mat-raised-button color="primary" (click)="openAdd()">Nuevo Producto</a>
    </div>
    
    
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>

    <input matInput  placeholder="Buscar Nombre" #input (keyup)="applyFilter($event)">


</mat-form-field>
    <table mat-table [dataSource]="lst" class="table"
    matSort matSortActive="created" matSortDisableClear matSortDirection="desc">

    <ng-container matColumnDef ="IdProducto"  class="header-align-right" 
    mat-sort-header disableClear>
        <th mat-header-cell *matHeaderCellDef  mat-sort-header  >#</th>
        <td mat-cell *matCellDef="let element">{{element.idProducto}}</td>
    </ng-container>
    <ng-container matColumnDef ="Nombre" >
        <th mat-header-cell *matHeaderCellDef  mat-sort-header class="header-align-right" >Nombre Producto</th>
        <td mat-cell *matCellDef="let element" class="header-align-right">{{element.nombre}}</td>
    </ng-container>
    <ng-container matColumnDef ="Cantidad">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right"> Cantidad </th>
        <td mat-cell *matCellDef="let element" class="header-align-right">{{element.cantidad}}</td>
    </ng-container>
    <ng-container matColumnDef ="Descripcion">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Descripcion</th>
        <td mat-cell *matCellDef="let element" class="header-align-right">{{element.descripcion}}</td>
    </ng-container>
    <ng-container matColumnDef ="Precio">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Precio</th>
        <td mat-cell *matCellDef="let element" class="header-align-right">{{element.precio}}</td>
    </ng-container> 
    
   

    
    
    <ng-container matColumnDef ="Acciones">
        <th mat-header-cell *matHeaderCellDef  class="header-align-right margencab" >Acciones</th>
        <td mat-cell *matCellDef="let element" class="header-align-right ">
            <button (click)="Edit(element)" mat-raised-button color="primary" class="margencab">Editar</button> 
            <button (click)="delete(element)" mat-raised-button color="Basic" class="margencab">Eliminar</button>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="Columnas"></tr>
    <tr mat-row *matRowDef="let row; columns Columnas"></tr>
    
    
</table>

</div>

标签： htmlangulartypescriptentity-framework

html - 如何优化有角材料的表格

问题描述

解决方案

推荐阅读