I am currently working on a project that utilizes Angular with Ionic 3. In this application, I have an array of questions that can be edited by the user if any mistakes are made.

The issue arises when I attempt to edit a question from the array. Any changes made during editing immediately reflect in the array displayed using *ngFor.

Before delving into the code, let me provide some context:

Upon creating and saving a question, the questions and answers are displayed in a list using *ngFor. From there, users can choose to edit or delete a question.

https://i.sstatic.net/7KNAP.png

When I click "edit," the question data is sent back to the form for editing. As I make edits, the answer on the right side updates dynamically. However, upon canceling the editing process, the changed value persists, whereas I'd like it to revert only after clicking save again.

https://i.sstatic.net/dIE8g.png

Here's a snippet of my HTML code:

<ion-row>
<ion-col col-12 col-md-6>

  <!-- THE FORM USED FOR CREATION AND EDITING -->
  <form novalidate [formGroup]="novaQuestaoMultipla">
    <ion-item no-lines>
      <ion-label stacked>
        Title
        <p text-right [ngClass]="{'green': novaQuestaoMultipla.get('titulo').value.length <= 70, 'yellow': novaQuestaoMultipla.get('titulo').value.length > 70 && novaQuestaoMultipla.get('titulo').value.length <= 140, 'red': novaQuestaoMultipla.get('titulo').value.length > 140 }">({{novaQuestaoMultipla.get('titulo').value.length}}/160)</p>
      </ion-label>
      <ion-textarea rows="4" formControlName="titulo" maxlength="160" [ngClass]="{'campo-invalido': !novaQuestaoMultipla.get('titulo').valid && (novaQuestaoMultipla.get('titulo').dirty || multiplaInvalida)}"></ion-textarea>
    </ion-item>
    <div *ngIf="titulosQuestoesFiltradas.length > 0" class="titulos" text-center>
    </div>

    <p text-center class="texto-campo-invalido" *ngIf="!novaQuestaoMultipla.get('titulo').valid && (novaQuestaoMultipla.get('titulo').dirty || multiplaInvalida)">Invalid</p>
    <br />

    <ion-row class="campo-respostas">
      <ion-col text-right col-8>
        <h3>Answer Options</h3>
      </ion-col>
      <ion-col text-left col-4>
        <button ion-button round icon-only color="gold" [disabled]="quantidadeRespostasMultipla == 5" (click)="novaOpcao()">
          <ion-icon name="add"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="quantidadeRespostasMultipla > 0">
      <ion-col text-left>
        <h3>Text</h3>
      </ion-col>
      <ion-col text-right>
        <h3>Correct</h3>
      </ion-col>
    </ion-row>

    <ion-row *ngFor="let r of respostasMultipla; let i = index" class="resposta-multipla" align-items-end>
      <ion-col col-12 col-md-8>
        <ion-item no-lines>
          <ion-label stacked>
            <p text-right [ngClass]="{'green': r.texto.length <= 20, 'yellow': r.texto.length > 20 && r.texto.length <= 35, 'red': r.texto.length > 35 }">({{r.texto.length}}/40)</p>
          </ion-label>
          <ion-input type="text" maxlength="40" [(ngModel)]="r.texto" [ngModelOptions]="{standalone: true}"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col col-6 col-md-2 text-center>
        <button ion-button color="danger" round (click)="excluirOpcao(i)">
          <ion-icon name="ios-trash-outline"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-6 col-md-2>
        <ion-item no-lines>
          <ion-toggle (ionChange)="escolheuCorreta(r, index)" [(ngModel)]="r.correto" [ngModelOptions]="{standalone: true}"></ion-toggle>
        </ion-item>
      </ion-col>
    </ion-row>
    <br />

    <div text-center>
      <button ion-button round color="danger" *ngIf="hasEditQuestao" (click)="cancelarEdicao()">Cancel Editing</button>
      <button ion-button round (click)="salvarMultipla()">Save Question</button>
    </div>
  </form>
</ion-col>

<!-- DISPLAY OF QUESTIONS WITH OPTIONS TO EDIT-->
<ion-col col-12 col-md-6 >
  <ion-item *ngFor="let q of questoesEscolhidasExibicao; let i = index" text-wrap>
    <h2>{{q.titulo}}</h2>
    <p *ngFor="let r of q.respostas">{{r.texto}}</p>
    <button ion-button outline color="gold" item-end icon-only (click)="editarQuestao(q, i)">
      <ion-icon name="create"></ion-icon>
    </button>
    <button ion-button outline color="danger" item-end icon-only (click)="removerQuestao(q, i)">
      <ion-icon name="trash"></ion-icon>
    </button>
  </ion-item>
</ion-col>

And below is my JS function for editing:

// EDIT QUESTION
editarQuestao(questao, index) {
    // Creating a temporary variable to store the question data without maintaining references
    const respostas = questao.respostas;

    // Saving the ID and index of the question
    this.hasEditQuestao = questao.id;
    this.editQuestaoIndex = index;
    this.questData = questao;

    // Updating the form with the question data
    this.novaQuestaoMultipla.get('titulo').setValue(questao.titulo);
    this.respostasMultipla = respostas;
    this.quantidadeRespostasMultipla = this.respostasMultipla.length;
}

Just to clarify, I'm using an object to push data once to Firebase and an array for display purposes. How can I ensure that edits made to a question do not automatically apply, allowing for updates only upon clicking save? Is there a way to remove references from the array?