Angular документ обновления firestore заставляет элемент прокручиваться к его вершине - PullRequest
Новая
       6

Angular документ обновления firestore заставляет элемент прокручиваться к его вершине

0 голосов
/ 05 марта 2020

При нажатии на флажок родительский элемент прокручивается к его вершине. Я обнаружил, что функция обновления afs делает это возможным. Как я могу предотвратить прокрутку элемента, который, я предполагаю, был перезагружен из-за обновления afs? Есть ли способ запомнить положение прокрутки и установить его обратно после обновления или около того?

enter image description here

компонент. 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>

style 

.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;
}

component.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});
}
...