Question

我正在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

]

home.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");
  }

}

home.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>

Answer 1

鉴于您只是在Microsoft Edge中遇到问题（而我没有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组件来减少浏览器需要同时渲染的项目数量。

带有ngFor Angular 5的边缘浏览器中的自定义复选框单击缓慢

1 个答案: