Question

这是一个更普遍的问题，但在这种情况下，我有一个带复选框的待办事项列表（属于一个可观察的）。当我更新复选框的状态时，整个observable都会刷新并且UI会更新，在这种情况下（如果它们打开），复选框会闪烁＆＃39;从开到开。

有没有办法避免这种情况？

我的组件是：

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

我遇到了同样的问题。做了两个观察：

复选框在Safari中不会闪烁
最可能的原因是使用[(ngModel)]（双向数据绑定）

在docs中，我提供了两个选项-有和没有。没有[(ngModel)]的代码在Chrome中不会闪烁。

Answer 2

对于遇到此问题的任何人，我通过添加返回索引的 trackBy 函数解决了此问题：

  public identifyFnBy(index: number): number {
    return index;
  }

        <div class='item' *ngFor='let item of items$ | async; trackBy: identifyFnBy'>
      
        </div>

angular2材质可观察更新UI刷新

2 个答案: