时间戳

首页 > 解决方案 > 使用 ngFor Angular 5 在边缘浏览器中自定义复选框单击缓慢

ionic3 - 使用 ngFor Angular 5 在边缘浏览器中自定义复选框单击缓慢

问题描述

我在 UI 中使用 *ngFor 绑定元素。该元素包含自定义复选框，该复选框根据数据示例中的条件检查值，在这个意义上，item.isSelected= true。如果我单击复选框，我只会在修饰符数组中将选定的复选框数据更改为“item.isSelected=true” 。如果我在数组中更改了任何内容，它也会自动反映在 UI 中。因为数据已绑定到 ngFor，它再次尝试将数据重新绑定到 UI。但是绑定值需要很长时间并选中 UI 中的复选框（仅在边缘浏览器中，其他浏览器如 chrome、firefox 表现良好）。请给我一些建议来解决这个问题。

数据示例

[
 {
   body: "laudantium enim quasi est quidem magnam voluptate ipsam eos↵tempora 
           quo necessitatibus↵dolor quam autem quasi↵reiciendis "
   email: "Eliseo@gardner.biz"
   id: 1
   isSelected: false
   name: "id labore ex et quam laborum"
   postId: 1
 }
.
.
.
upto 2500 objects

]

主页.ts

export class HomePage {

  commentArray: any = [];
  constructor(public navCtrl: NavController, private http: Http) {
    debugger
    this.getdata();
  }

  getdata() {
    //getting the data from API here
    this.http.get('https://jsonplaceholder.typicode.com/comments').
      subscribe(data => {
        this.commentArray = JSON.parse(data['_body']);
        //pass this to set data to set isSelected flag
        this.setData(this.commentArray);
      }, error => {
        console.log(error);
      })
  }

  setData(data) {
    //here setting the isSelected flag
    for (let i = 0; i < data.length; i++) {
      data[i]['isSelected'] = false;
    }
    //getting only 500 data so copy the old data and push to array
    for (let i = 0; i < 2000; i++) {
      let d = data[0];
      d.isSelected = false;
      data.push(d);
    }
    this.commentArray = data;
    //Total data now 2500
  }

  changeCheckbox(index){
    debugger
    console.time("Performance");
    for(let i=0;i<this.commentArray.length;i++){
      if(index == i){
        this.commentArray[i].isSelected = true;
      }else{
        this.commentArray[i].isSelected = false;
      }
    }
    console.timeEnd("Performance");
  }

}

主页.html

 <div>
    <ul *ngFor="let item of commentArray;let i = index;">
      <li (click)="changeCheckbox(i)">
        <span>{{i}}</span>&nbsp;
        <input type="radio" [checked]="item.isSelected" >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>

标签： ionic3angular5microsoft-edgengfor

解决方案

鉴于您只在 Microsoft Edge 中遇到问题（而且我没有优势），我只能为您猜测一些性能优化：

export class HomePage {

  commentArray: any = [];
  selectedComment: number | null = null;

  constructor(public navCtrl: NavController, private http: Http) {
    this.getdata();
  }

  getdata() {
    this.http.get('https://jsonplaceholder.typicode.com/comments').
      subscribe(data => {
        // Only getting the first 500 items
        this.commentArray = JSON.parse(data['_body']).slice(0,500);          
      }, error => {
        console.log(error);
      })
  }

  selectComment(index: number) {
    this.selectedComment = index;
  }
}

<div>
  <ul *ngFor="let item of commentArray;let i = index;">
    <li (click)="selectComment(i)">
      <span>{{i}}</span>&nbsp;
      <input type="radio" [checked]="selectedCheckbox === index" >
      <span>{{item.name}}</span>
    </li>
  </ul>

最大的性能改进可能来自将组件的更改检测切换到ChangeDetectionStrategy.OnPush. 视口中有这么多项目，这可能只是一个更改检测问题。

您还可以使用角度 cdk VirtualForOf组件来减少浏览器需要同时呈现的项目数量。

推荐阅读