Html 如何在angular 5中使用带有ngfor的大型阵列

当我用ngfor页面显示100多个产品时，速度非常慢。 如果在ngFor中为100个项目调用一个方法，或者为一个项目在ngFor中设置很多元素，那么浏览器的性能会有问题吗

这是我的typescript代码，我通过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>

{{product.product_title}
{{product.product_date}
{{dataservices.language.add_wishlist}
最喜欢的
最爱的边界
最喜欢的
最爱的边界
最喜欢的
12889
运货马车
问题是每次在模板中执行某些操作（例如，移动鼠标）时，都会执行函数的代码。模板的生命周期导致了这一点，再加上您正在为阵列中的每个项创建该函数的实例。我建议你试试看

1-更改组件的更改检测策略

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

2-减少从模板到组件中方法的调用次数（如果可以应用，请尝试使用管道）
这是一个非常普遍的问题。你能提供你的代码吗？如果没有它，就很难知道问题在哪里。您好，请查看这篇文章，了解有关在StackOverflow上提问的内容：好的，谢谢您。我编辑了我的问题，但有人能帮我吗？我编辑了，但没有任何结果。@Kloderishaba您到底做了什么？check_wish（）方法被多次调用，在里面放一个console.log，你们会看到我从服务器上获得了100个产品，并在浏览器中显示它们，每个产品都有两个选项“添加到愿望列表”和“添加到购物车列表”，如果单击“添加到愿望”或“购物车”将此项目添加到所选卡片或愿望中，并检查是否在愿望或购物车中添加，但现在我已经删除了所有这些控制器，而阿甘对one houndred产品的性能很慢。不要下载所有的产品。尝试使用分页或无限滚动，因为如果产品对象太重，可能会出现问题