编辑对象数组中的对象属性而不在编辑时引用数组

Question

我有一个使用 Angular 和 Ionic 3 的应用程序，我有一系列问题。如果用户做错了什么，可以编辑这些问题。

这种情况是，当我单击编辑任何问题时，它会在数组中引用该问题，并且任何编辑都会立即反映到 *ngFor 中显示的数组。

在展示一些代码之前，让我再解释一下：

我创建一个问题并保存它，在*ngFor 列表中显示问题和答案，我可以在其中编辑问题或删除它。

点击“编辑”后，我将问题数据发送回我可以编辑的表单。在编辑右侧的列表时，我正在编辑时会更改答案。但是当我单击取消编辑时，它会保留我已更改的值，但仅当用户再次单击保存时我才需要更改。

这是我的 HTML 代码：

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

  <!-- THE FORM I'M USING TO CREATE AND EDIT -->
  <form novalidate [formGroup]="novaQuestaoMultipla">
    <ion-item no-lines>
      <ion-label stacked>
        Título
        <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)">Inválido</p>
    <br />

    <ion-row class="campo-respostas">
      <ion-col text-right col-8>
        <h3>Opções de Respostas</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>Texto</h3>
      </ion-col>
      <ion-col text-right>
        <h3>Correta</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()">Cancelar edição</button>
      <button ion-button round (click)="salvarMultipla()">Salvar Questão</button>
    </div>
  </form>
</ion-col>

<!-- THE LISTING I SHOW MY QUESTIONS AND WHERE I CAN CLICK TO EDIT THEM-->
<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>

这是我用于编辑的 JS 代码：

// EDIT QUESTION
editarQuestao(questao, index) {
    // HERE I TRY SAVING THE QUESTION IN ANOTHER VARIABLE SO IT CAN "LOSE" THE REFERENCE, BUT NO LUCK
    const respostas = questao.respostas;

    // SAVE THE QUESTION ID THAT'S THE OBJECT KEY
    this.hasEditQuestao = questao.id;
    // THE ARRAY INDEX WHERE THE QUESTION IS SAVED
    this.editQuestaoIndex = index;
    // THE QUESTION DATA
    this.questData = questao;

    // UPDATE THE FORM WITH THE QUESTION DATA
    this.novaQuestaoMultipla.get('titulo').setValue(questao.titulo);
    //this.novaQuestaoMultipla.get('tempo').setValue(10);
    this.respostasMultipla = respostas;
    this.quantidadeRespostasMultipla = this.respostasMultipla.length;
}

FIY 我有一个对象和一个对象数组。我正在使用的对象，所以我可以简单地将数据推送到 Firebase 一次。我用来显示目的的数组。

我怎样才能做到这一点？如何在不自动更改问题的情况下编辑我的问题，以便只有在单击保存时才能更新它？如何从我的数组中删除该引用？

Answer 1

由于2-way data-bind 和[(ngModel)]，您会遇到这些问题。如果您使用Reactive forms，您可以轻松避免这些问题。

Angular 反应形式促进了反应式编程风格， 支持显式管理在非 UI 数据之间流动的数据 模型（通常从服务器检索）和面向 UI 的表单模型 保留屏幕上 HTML 控件的状态和值。 反应式表单提供了使用反应式模式、测试和 验证。

您可以直接在 组件类。由于组件类可以立即访问两者 数据模型和表单控制结构，可以推送数据模型 值到表单控件中，并将用户更改的值拉回。 组件可以观察表单控件状态的变化并做出反应 这些变化