Angular firestore 更新文档使元素滚动到顶部

Question

点击复选框使父元素滚动到它的顶部。我发现 afs 更新功能正在发生这种情况。如何防止滚动我假设的元素，由于 afs 更新而重新加载？有什么办法可以记住滚动位置并在更新后将其设置回来？

component.html

<div class="taskScrollableContent">
   <div class="taskDescription">
      <p>{{ task.description }}</p>
   </div>
   <div class="todoList">
      <ul *ngFor="let todo of task.todoList; let j = index">
         <li>
           <input type="checkbox" [checked]="todo.isDone" (change)="onTodoCheck(task.todoList, task.id, j)">
           <p [ngClass]="{'done': todo.isDone }">{{ todo.name }}</p>
        </li>
     </ul>
  </div>
</div>

风格

.taskScrollableContent {
    max-height: 250px;
    overflow: auto;
}
.taskScrollableContent::-webkit-scrollbar{
    width: 3px;
}
.taskDescription{
    padding: 0 3px;
}
.taskDescription p{
    word-break: break-word;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #444;
}
.todoList{
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.todoList ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.todoList li{
    word-break: break-word;
}
.todoList input[type=checkbox]{
    margin-right: 3px;
    vertical-align: text-bottom;
    cursor: pointer;
}
.todoList p{
    padding: 0;
    display: inline;
}
.todoList .done{
    text-decoration: line-through;
}

组件.ts

onTodoCheck(todos: Array<Todo>, taskId: string, i: number): void {
  todos[i].isDone = !todos[i].isDone;
  this.afs.collection('boards').doc(this.boardId)
  .collection('categoryList').doc(this.categoryId)
  .collection('taskList').doc(taskId).update({todoList: todos});
}

Answer 1

很抱歉，您 2 年后才收到回复！

我不确定 Angular，但对于 React，您可以使用数组“欺骗”组件以防止它重新呈现。

例如，

// re-renders
const [data1, setData1] = useState(true);

// doesn't re-render IF you mutate the array directly
const [data2, setData2] = useState([true]);