时间戳

首页 > 解决方案 > 角度 ngModel 绑定无法正常工作

html - 角度 ngModel 绑定无法正常工作

问题描述

我的班级有 2 个列表，我有一个函数，它从第一个数组中获取一个元素并将其推送到第二个数组。我的问题是，如果我更改第二个数组的元素，第一个数组中的相同元素会被更改，我尝试了onchange 函数和 [(ngModel)]

<div >
                <p>{{item.name}}</p>
                <p [hidden]="true" id={{item.name}} >
                    <input   type="text" (change)=t($event,item.id) >
                </p>
              </div>


t(event,id:number)
{
  console.log(event.target.value);
  this.nodes2.find(a=>a.id===id).name=event.target.value;


}

//use this for pushing item
  droppp(ev) {
    ev.preventDefault();
    //console.log(this.dragedElement)
    var nodtmp:ExampleFlatNode[];
    nodtmp=this.nodes2;
    nodtmp.push(this.dragedElement);
    this.nodes2=nodtmp;

  }

标签： html

解决方案

改变拖动对象属性值的问题与 ngModel 无关，也与 onChange 事件无关。问题是因为您不复制对象本身，而只是复制它的引用。在 drop 函数中不要推送对象，而是将其更改为应该创建已删除对象的副本的this.dragedElement外观。nodtmp.push({...this.dragedElement})如果您需要更深层次的对象副本，请使用lodash带deepClone函数的库。

推荐阅读