Question

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

案例是当我点击编辑任何任务时，它会在数组中引用该问题，并且任何编辑都会立即反映到*ngFor中显示的数组。

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

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

点击＆＃34;编辑＆＃34;我将问题数据发送回我可以编辑的表格。在我编辑时，在右侧编辑列表会更改答案。但是，当我点击取消编辑时，它保持了我已经改变的价值，但是如果用户点击再次保存，我只需要更改。

这是我的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，则可以轻松避免这些问题。

角度反应形式促进了反应式编程   有利于显式管理非UI数据之间的数据流   模型（通常从服务器检索）和面向UI的表单模型   它保留了屏幕上HTML控件的状态和值。   反应形式提供易于使用反应模式，测试和   验证

您可以直接在中创建和操作表单控件对象   组件类。由于组件类可以立即访问它们   数据模型和表单控件结构，可以推送数据模型   值进入表单控件并将用户更改的值拉回。   该组件可以观察到表单控制状态的变化并做出反应   那些变化

在编辑

1 个答案: