Обновление пользовательского интерфейса Angular2

Question

Это более общая проблема, однако в этом случае у меня есть список задач (принадлежащих наблюдаемой) с флажками. Когда я обновляю состояние флажка, все наблюдаемое обновляется, и пользовательский интерфейс обновляется, и в этом случае (если они включены) флажки "мигают" с выключенного на включенное.

Есть ли способ избежать этого?

Мой компонент:

ngOnInit() {
    this.myTasksSub = MeteorObservable.subscribe('myTasks', this.username).subscribe(() => {
      MeteorObservable.autorun().subscribe(() => {
        this.tasks = Tasks.find();

        if (!this.tasks) return;
      });
    });
  }

и HTML:

<div class="card-outer" *ngFor="let task of tasks | async; let i = index">
    <div class="card-container">
        <div class='card-body'>
          <div *ngFor="let todo of task.todos | todosFilter:task.filterTodos" class="todo-wrapper">
            <mat-checkbox 
              [checked]="todo.done" 
              (change)="toggleTodo(task,todo)" 
              [(ngModel)]="todo.done">
            </mat-checkbox>

Answer 1

Я столкнулся с той же проблемой. Сделано два замечания:

1. Флажки в Safari не мигают
2. Наиболее вероятной причиной этого является использование [(ngModel)] (двусторонняя привязка данных)

В этом блице я предоставил два варианта - и без него. Код без [(ngModel)] не мигает в Chrome.

Answer 2

Для тех, кто сталкивался с этим, я исправил эту проблему, добавив trackByфункция, которая возвращает индекс: