Как удерживать моментальный снимок объекта из firebase с двусторонней привязкой данных

Question

Я сталкиваюсь с тем, что не имеет смысла, и я даже не знаю, что искать, чтобы понять это. Таким образом, я решил, что я бы прямо спросил это здесь и надеюсь, что кто-то сможет указать, что происходит, и как мне следует решать эти проблемы.

У меня есть компонент editstudent, который заполняет форму на основе информации из firebase. Информация, которую я получаю, это "studentInfo", которая будет иметь много свойств, но пока она имеет только имя, фамилию, studentId, teacherId.

Я хочу активировать кнопку "Сохранить" только в том случае, если информация в форме была изменена по сравнению с той, что была в Firebase.

Это то, что делает мой код: -получить информацию о студентах из базы-огня - установить tempStudentInfo в студента во время инициализации. - разрешить пользователю изменять studentInfo, используя двустороннюю привязку данных. - в DOM измените кнопку на отключенную, если tempStudentInfo отличается от studentInfo.

Все это работает с моим кодом, однако tempStudentInfo всегда совпадает с studentInfo. Странно, я только когда-либо устанавливал tempStudentInfo в studentInfo в начале, но, похоже, он "обновляется" всякий раз, когда пользователь изменяет studentInfo, используя двустороннюю привязку данных.

 private studentFound: boolean = false;

      private studentInfo: studentInfo = {
        firstName: "",
        lastName: "",
        teacher: "",
        studentId: ""
      }
      private tempStudentInfo: studentInfo = {
        firstName: "",
        lastName: "",
        teacher: "",
        studentId: ""
      }

     ngOnInit() {
        this.studentFound = false;
        this.sub = this.route.params.subscribe(params => {
          this.id1 = params['id1'];
          this.id2 = params['id2'];
        });
        this.getStudents();
      }

      getStudents() {
        this.firebaseService.afAuth.authState.subscribe((val) => {
      if (val != null) {
        this.firebaseService.getStudents(val.uid).valueChanges().subscribe((list) => {
          for (var i = 0; i < list.length; i++) {
            if ((this.id1 == list[i].firstName) && (this.id2 == list[i].lastName)) {
              this.studentInfo = list[i];
              this.studentFound = true; 
            }
          }
        })
      }
    })
  }


  saveStudent(){
    console.log("student Saved");
    console.log("this is the student Info:",this.studentInfo);
    console.log("this is the tempstudentInfo:",this.tempStudentInfo);
  }

HTML:

<div class="container">
    <div class="row">
      <div class="title">
        Edit Student
      </div>
    </div>
    <div class="row">
      <div class="editStudentWrapper col-sm-6">
        <div class=" col-sm-12 card">
          <div class="card-container">
            <div class="row">
              <div class="col-sm-12">
                <div class="studentId">
                    Student ID: {{studentInfo.studentId}}
                </div>
                <div class="required text-right">
                  <font color="red">*</font>Required
                </div>
              </div>
            </div>
            <div class="seperator">
            </div>
            <form name="editStudentForm" #f="ngForm" autocomplete=off>
              <div class="row">
                <div class="col-sm-6">
                  <div class="input-title">First Name
                    <font color="red">*</font>
                  </div>
                  <input type="string" 
                  class="form-control" 
                  [ngClass]="{'is-invalid':studentFirstName.invalid&&studentFirstName.touched}" 
                  [(ngModel)]="studentInfo.firstName"
                    name="firstName" 
                    #studentFirstName="ngModel" 
                    autocomplete="new-password" 
                    autocomplete="off" 
                    pattern="[a-zA-Z ]*"
                    required>
                  <div *ngIf="studentFirstName.invalid && (studentFirstName.dirty || studentFirstName.touched)" class="row">
                    <div *ngIf='studentFirstName.errors.required' class="col-sm-12 text-danger">
                      <i class="fa fa-exclamation-circle" aria-hidden="true"></i>First name is required
                    </div>
                    <div *ngIf='studentFirstName.errors?.pattern' class="col-sm-12 text-danger">
                      <i class="fa fa-exclamation-circle" aria-hidden="true"></i> Invalid Format
                    </div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="input-title">Last Name
                    <font color="red">*</font>
                  </div>
                  <input type="text" 
                  class="form-control" 
                  [ngClass]="{'is-invalid':studentLastName.invalid&&studentLastName.touched}" 
                  [(ngModel)]="studentInfo.lastName"
                    #studentLastName="ngModel" 
                    name="lastName" 
                    autocomplete="new-password" 
                    autocomplete="off" 
                    pattern="[a-zA-Z ]*"
                    required>
                  <div *ngIf="studentLastName.invalid && (studentLastName.dirty || studentLastName.touched)" class="row">
                    <div *ngIf='studentLastName.errors.required' class="col-sm-12 text-danger">
                      <i class="fa fa-exclamation-circle" aria-hidden="true"></i>Last name is required
                    </div>
                    <div *ngIf='studentLastName.errors.pattern' class="col-sm-12 text-danger">
                      <i class="fa fa-exclamation-circle" aria-hidden="true"></i> Invalid Format
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="row" *ngIf="f.valid" >
          <div class="col-sm-12 mybutton">
            <div (click)="saveStudent()" class="submitButton" >
              <div class="buttonText">Save</div>
              <div class="buttonIcon">
              <i class="fa fa-floppy-o" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Извините за все написанное, я просто хотел пояснить, что я спрашиваю.