how to avoid the updated value to be binded to other array using angular13-CodePudding

i am working on angular13, here i have button to move items from left to right. now once the item is moved from left to right and if i edit the same item under right side, the edited value is updated in left side array as well.

HTML:

<div >
  <div  id="headingBasicAgentsGroupView">
    <a
      href="javascript:void(0);"
      
      data-target="#basicAgentsGroupView"
      aria-expanded="false"
      aria-controls="basicAgentsGroupView"
      >Group View</a
    >
  </div>
  <div
    
    id="basicAgentsGroupView"
    aria-labelledby="headingBasicAgentsGroupView"
    data-parent="#basicTabAccordion"
  >
    <div  id="agents-group-view">
      <div >
        <div >
          <div >
            <h6 >Group</h6>
          </div>
        </div>
        <div ></div>
        <div >
          <div >
            <h6 >Not in Group</h6>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <input
                    type="text"
                    name="SearchDualList"
                    
                    placeholder="Search"
                  />
                </div>
              </div>
            </div>
            <div >
              <ul
                
                *ngFor="let child of agentInView"
                name="agentInGroup"
              >
                <li
                  
                  (click)="toggleActiveInGroup(child)"
                >
                  {{ child.value }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div
          
        >
          <button
            type="button"
            
            (click)="moveToTheRight()"
          >
            Move Right
          </button>
          <button
            type="button"
            
            (click)="moveToTheLeft()"
          >
            Move Left
          </button>
        </div>
        <div >
          <div >
            <div >
              <div >
                <div >
                  <input
                    type="text"
                    
                    placeholder="Search"
                  />
                </div>
              </div>
            </div>
            <div >
              <ul
                
                *ngFor="let child of agentNotinView"
                name="agentNotInGroup"
              >
                <li
                  
                  (click)="toggleActiveNotInGroup(child)"
                >
                  <input type="text" [(ngModel)]="child.value" />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

TS:

public moveToTheRight(): void {
    this.move('agentInView', 'agentNotinView');
  }

  public moveToTheLeft(): void {
    this.move('agentNotinView', 'agentInView');
  }

  // moving function
  public move(from: string, to: string): void {
    this[from].filter((item: any, i: number) => {
      if (this.isInActiveGroupItems(item)) {
        this[to].push(item);
        this[from].push(item);
        return false;
      } else {
        return true;
      }
    });

    // if needed
    // sort if needed
    this[to].sort((a, b) => (a.id > b.id ? 1 : -1));

    // clean active items after action
    this.activeItemsGroupView.length = 0;
    //this.activeItemsNotInGroup.length = 0;
  }

  public toggleActiveInGroup(eventItem: any): void {
    if (this.activeItemsGroupView.find((item) => item === eventItem)) {
      this.activeItemsGroupView = this.activeItemsGroupView.filter(
        (item) => item !== eventItem
      );
    } else {
      this.activeItemsGroupView.push(eventItem);
    }
  }
  public toggleActiveNotInGroup(eventItem: any): void {
    if (this.activeItemsNotInGroup.find((item) => item === eventItem)) {
      this.activeItemsNotInGroup = this.activeItemsNotInGroup.filter(
        (item) => item !== eventItem
      );
    } else {
      this.activeItemsNotInGroup.push(eventItem);
    }
  }

  public isInActiveGroupItems(eventItem: any): boolean {
    return !!this.activeItemsGroupView.find((item) => item === eventItem);
  }
  public isInActiveNotGroupItems(eventItem: any): boolean {
    return !!this.activeItemsNotInGroup.find((item) => item === eventItem);
  }

DEMO

CodePudding user response：

You are pushing the same instance into both arrays. You should create a new object at some point, so that you don't edit the same object reference and propagate your changes in places you don't want them. I suggest to make a new reference by using destructuring inside your move method:

  // moving function
  public move(from: string, to: string): void {
    this[from].filter((item: any, i: number) => {
      if (this.isInActiveGroupItems(item)) {
        this[to].push({...item});
        this[from].push(item);
        return false;
      } else {
        return true;
      }
    });

    // if needed
    // sort if needed
    this[to].sort((a, b) => (a.id > b.id ? 1 : -1));

    // clean active items after action
    this.activeItemsGroupView.length = 0;
    //this.activeItemsNotInGroup.length = 0;
  }