똑같이 했는데 왜 강사님과 다른 결과가 나오나요?

강사님과 똑같은 방법으로 했습니다만 수정과 삭제 부분이 원활하게 이뤄지지 않고 있습니다.

수정을 하면 수정전 결과가 그대로 남아있고 수정을 완료한 결과가 화면 최하단부에 추가가 되구요

삭제를 하면 리스트 최상단 부분의 항목이 화면에서 사라집니다.

이것들은 모두 새로고침을 하면 정상적으로 작동이 되는데요. 수정하면 수정한 항목이 그 자리에 수정한대로 값만 변해있는 (정상적인 수정) 상태로 돼있고, 삭제하면 삭제한 항목이 없어져있고 상단부의 사라졌던 부분은 다시 원래대로 상단부에 있게 됩니다.(정상적인 삭제)

왜 이렇게 되는건지 원인하고 해결방안을 알려주셨으면 좋겠습니다.

import { Injectable } from '@angular/core';
import { DatabaseProvider } from '../database/database';
@Injectable()
export class ProfileProvider {
  private userArray : any;
  constructor(public DatabaseProvider: DatabaseProvider) {
    console.log('Hello ProfileProvider Provider');
    this.DatabaseProvider.db.changes({
      live : true,
      since : 'now',
      include_docs : true,
      attachments : true
    }).on("change",(change)=>{
      this.checkChange(change);
    })
  }
  checkChange(change){
    let changed_doc = null;
    let changed_index = null;
    this.userArray.forEach((doc, index)=>{
      if(doc._id === change._id){
        changed_doc = doc;
        changed_index = index;
      }
    });
    if(change.deleted){
      this.userArray.splice(changed_index, 1);
    } else {
      if(changed_doc){
        this.userArray[changed_index] = change.doc;
      }else{
        this.userArray.push(change.doc);
      }
    }
  }

코드는 이런식으로 돼있구요 오탈자가 있는지 확인은 한 20번은 했습니다. 강사님께서 첨부해주신 첨부파일도 확인했을 때 이것과 차이가 있음을 확인할 수 없었습니다.