Пользовательский флажок медленный клик в браузере края с ngFor Angular 5 - PullRequest
Новая
       25

Пользовательский флажок медленный клик в браузере края с ngFor Angular 5

0 голосов
/ 19 февраля 2019

Я связываю элементы, используя * ngFor в пользовательском интерфейсе.Элемент содержит пользовательский флажок, который проверяет значение на основе условия из примера данных, item.isSelected = true в смысле.Если я нажимаю флажок, я изменяю только выбранные данные флажка на "item.isSelected = true" внутри массива модификаторов.Если что-то я изменяю в массиве, то это будет автоматически отражаться и в пользовательском интерфейсе.потому что данные связаны с ng, для этого снова попробуйте повторно привязать данные к пользовательскому интерфейсу.Но это займет слишком много времени, чтобы связать значения и установить флажок в пользовательском интерфейсе (только в пограничном браузере другие, такие как 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>

1 Ответ

0 голосов
/ 03 марта 2019

Учитывая, что у вас возникают проблемы только в 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 , чтобы уменьшить количество элементов, которые должен отображать браузер.в то же время.

...