Question

当我用ngfor页面显示超过100个产品时非常慢。如果在ngFor中使用100个项目调用方法或在ngFor中为一个项目设置大量元素，那么浏览器的性能是否有任何问题？

这是我的打字稿代码，我从服务器获得了一些带有http post请求的产品

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-减少从模板到组件中方法的调用次数（如果可以应用，请尝试使用管道）

如何在角度5中使用带有ngfor的大数组

1 个答案: