ngFor обновляется автоматически

Question

У меня есть список в list-components, как указано ниже:

list.components.ts

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { EditModalComponent } from "...../edit-modal.component";

@Component({
   selector: 'list',
   templateUrl: './list.component.html',
   providers: [ Service ]
})
export class ListComponent implements OnInit {
    bsModalRef: BsModalRef;
    list:[];

    constructor(private modalService: BsModalService, private service: Service) {  }

    ngOnInit() { this.service.getList().subscribe(data => this.list = [...data ] )  }

    edit({ thisData }) {
       const initialState = { data: thisData };
       this.bsModalRef = this.modalService.show(EditModalComponent, { initialState });
       this.bsModalRef.content.updateSingleValue = (id, name, value) => this.service.update(id, { [name]: value })
    }
}

list.components. html

<table-list [(data)]="list" (action)="edit($event)"></table-list>

Теперь вызывается table-list компонент, как показано ниже:

table-list.components.ts

@Component({
  selector: "table-list",
  inputs: ["data"],
  templateUrl: "./table-list.components.html"
})
export class TableListComponent implements OnInit, OnChanges {
    @Input() data: any[];
    @Output() editAction = new EventEmitter();

    handleEdit($root) {
       this.editAction.emit({ thisData: $root });
    }

    ngOnChanges(changes: SimpleChanges) {
       // this will execute in every form data update
    }
}

table-list.components. html

<table>
   <tr *ngFor="let $root of data">
      <td> {{ $root.name }} </td>
      <td> {{ $root.email}} </td>
      <td> <button (click)="handleEdit()">edit</button> </td>
  </tr>
</table>

Здесь, как вы можете видеть, просто отображается список данных и кнопка edit, когда пользователь нажимает кнопку edit , он вызывает edit({ thisData }) метод list.component.ts. Затем метод edit({ thisData }) откроет modal с input form. Поэтому, когда пользователь редактирует любые данные формы, он выполняет следующий код и обновляет отдельные данные. И он работает правильно.

this.bsModalRef.content.updateSingleValue = (id, name, value) => this.service.update(id, { [name]: value })

Моя проблема в том, что когда пользователь обновляет любые данные формы , он также обновляет весь список list-data () перегенерировано). Я просто хочу обновить отдельные данные из list (не хочу заново генерировать list ). Я установил некоторый отладчик и обнаружил, что при обновлении любых данных формы он вызывает ngOnChanges(changes: SimpleChanges) из table-list.component.ts и заново генерирует список .

Как я могу решить эту проблему? Заранее спасибо.

Answer 1

Используйте trackBy в вашем *ngFor l oop. Таким образом, только элементы, которые были изменены, будут перерисованы. Смотри топ ответ здесь