如何在Angular 5中使用帶有ngfor的大型數組

Question

當我用ngfor頁面顯示100多種產品時，速度非常慢。 如果在ngFor內調用一個具有一百個項目的方法或在ngFor內為一個項目設置很多元素，瀏覽器的性能是否存在問題？

這是我的打字稿代碼，我通過HTTP發布請求從服務器上獲得了一些產品

public  products:any = [] ;

constructor(
  private setRouter: SetRouterService,
  private header :HeaderService,
  private cdr:  ChangeDetectorRef,
  private router : Router,
  private crypto:EncryptDecryptService ,
  private dataservices: DataService ,
  private Httpservice :HttpService ,
  private route: ActivatedRoute
) {


this.dataservices.update_loader(true);

this.dataservices.create_object_request( 'products', { 'type': 'default', 'number_click': 1 }  );

this.my_products = this.Httpservice.Http_Post( this.dataservices.object_request ) // make request ......

    .subscribe( //  take success

        data => {

          if ( data['status'] == 'product' ) {

            this.products = data['data']['products'];

            this.build_pages_link( data['data']['pages_details']);

            this.dataservices.update_loader(false);

          }
        },
        error => console.log( error['data'] ) // take error .....

    );


}

這是我用ngFor顯示產品的html代碼

  <div class="width_products  products-animation " *ngFor="let product of products ; let i = index"  [ngClass]="{ 'width_products_open_menu':header.status_menu  }" >

      <div class="each_width_product" >

          <div class="title_products more_detail_product" (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })">

              {{product.product_title }}

          </div>


          <div class="dropdown_products">

              <span class="glyphicon glyphicon-chevron-down"></span>

          </div>

          <div class="date_products">

              <span class='glyphicon glyphicon-time'></span> {{product.product_date}}

          </div>

          <div class="image_profile_company " (click)="set_router({ path:product['company'].company_name , data: product['company'].company_id , relative:true })">

              <img  class="image_prof_admin" src="../../assets/images/products_image/{{product['company'].company_image}}">

          </div>

          <div class="image_product_primary  " (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })">

              <img class="image_product img_primary_product{{product.product_id}}" src="../../assets/images/products_image/{{product.product_image}}">

          </div>

          <div class="wish_list hover_all_wish notCloseDropdawnFavorite notCloseDropdawnCard" (mouseleave)="mouseLeave_wish( product )"  (mouseenter) ="mouseHover_wish( product ,i )"  id="wish_list{{product.product_id}}" (click)="header.add_wish_list( product )" [ngClass]="{'wish_list_hover': product_properties.index_product == i }">

          </div>

          <div class="about_wish" >

              <div class="wish_list_write">

                  <div class="plus_icon">{{dataservices.language.add_wishlist}}</div>

              </div>

              <div class="wish_list_icon">

                  <button mat-mini-fab class="button_heart"  >

                      <div *ngIf="header.wish_properties.wishList.length > 0; else  emtyWish " >

                          <div *ngIf="check_wish( product ) ; else notinwish">

                              <mat-icon>favorite</mat-icon>

                          </div>

                          <ng-template #notinwish >

                              <mat-icon class="notCloseDropdawnFavorite notCloseDropdawnCard"  [ngClass]="{'hide_border_heart'  : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite_border</mat-icon>

                              <mat-icon class="hearts_div_hover notCloseDropdawnFavorite notCloseDropdawnCard" [ngClass]="{'show_full_heart'  : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite</mat-icon>

                          </ng-template>

                      </div>

                      <ng-template #emtyWish>

                          <mat-icon  [ngClass]="{'hide_border_heart'  : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite_border</mat-icon>

                          <mat-icon class="hearts_div_hover" [ngClass]="{'show_full_heart'  : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite</mat-icon>

                      </ng-template>

                  </button>

              </div>

          </div>

          <div class="footer_products">

                <span matTooltip="Views!">

                    <div class="button_footer_products">

                        <span class="glyphicon glyphicon-eye-open icon_eye"></span>

                        <div class="both_write ">

                            12889

                        </div>

                    </div>

                </span>

              <span matTooltip="Add to your card"  class="notCloseDropdawnCard notCloseDropdawnFavorite " (click)="header.add_cart_list( product )">


                  <div class="button_footer_products">

                      <span class="glyphicon glyphicon-plus icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" *ngIf="!check_cart( product ) ; else incart "></span>

                      <ng-template  #incart>

                          <span class="glyphicon glyphicon glyphicon-ok icon_eye notCloseDropdawnCard notCloseDropdawnFavorite"></span>

                      </ng-template>

                      <div class="both_write ">

                          Cart

                      </div>

                  </div>

              </span>

              <span matTooltip="See Details!">

                  <div (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })" class="button_footer_products more_detail_product" id="<?php echo $result_all_products['id'] ?>">

                      <span class=" glyphicon glyphicon-option-horizontal icon_eye"></span>

                      <div class="both_write ">

                          More
                      </div>

                  </div>

              </span>

          </div>

          <div class="prise_products">

              Price:

              <div class="both_prise_products prise_primary">

                  <del>$2500</del>

              </div>

              <div class="both_prise_products prise_secondary">

                  $3500

              </div>

          </div>

          <div class="plus_height"></div>

      </div>

  </div>

我應該怎么解決呢？ 謝謝。

Answer 1

問題是您每次在模板中執行某項操作時（例如，移動了鼠標）函數的代碼都會執行。 模板的生命周期導致了這一點，此外，您正在為數組中的每個項目創建該函數的實例。 我建議你嘗試

1-更改組件的更改檢測策略

Component({
   ...,
   changeDetection: ChangeDetectionStrategy.OnPush
})
MyComponent {}

2-減少從模板到組件中方法的調用次數（如果可以應用，請嘗試使用管道代替）