编辑在任何更改时自动更新动态表格内容答案

【问题标题】：Edit updating dynamic table content automatically on any change编辑在任何更改时自动更新动态表格内容
【发布时间】：2019-12-12 21:13:40
【问题描述】：

我在将行内容加载到动态表中的编辑模式中遇到了一些问题。当我单击编辑按钮时，模式使用 ngModel 加载行内容并从函数中获取数据。问题是当我编辑模态内容时，无论我是否点击保存按钮，表格内容都会自动更新。

我的按钮：

<button type="button" class="btn btn-light btn-sm" data-toggle="modal" (click)="passingData(pedido)" data-target="#EditarItem"><i class="fas fa-pen"></i></button>

我的功能：

passingData (data){
  this._pedido = data;
  this.pedido=this._pedido;
}

我的模态：

<div class="modal fade" id="EditarItem" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Editar Requisição</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
     </div>
     <div class="modal-body">
       <form name="formRequisicao">
         <div class="form-group">
           <label for="exampleFormControlSelect1">Escolha o produto</label>
             <select id="" class="form-control" name="produto" [(ngModel)]="pedido.nomeProduto">
               <option *ngFor="let pd of produtos" value="{{pd.nome}}">{{pd.nome}}</option>
             </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlInput1">Quantidade</label>
            <input class="form-control" name="quantidade" [(ngModel)]="pedido.quantidade" type="number" id="required"/>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Data</label>
            <input type="date" class="form-control" name="data" [(ngModel)]="pedido.data">
            <span class="input-group-addon">
              <i class="glyphicon glyphicon-calendar"></i>
            </span>
           </div>
         </form>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-primary" (click)="editarRequisicao()" data-dismiss="modal">Guardar produto</button>
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
       </div>
     </div>
   </div>
 </div>

【问题讨论】：

因为您使用 ngModel 它正在双向更新模型。
我怎样才能避免这种行为@sagat？
尝试像这样省略括号 () --> [ngModel]="pedido.nomeProduto on the modal
是的！它有效@sagat。谢谢！我怎样才能给你积分？
我在这里给你一个简短的回答

标签： angular typescript angular-ui-bootstrap

【解决方案1】：

您正在与[(ngModel)] 绑定，这意味着您从source --> target 和target --> source 发送，所谓的双向数据绑定。如果你省略了这些括号 ()，它将表现得像一个输入 --> 从源到目标，如果你改变了一些东西，你必须单独处理它。

亲切的问候

【讨论】：