I have a project in Angular 17 with NG-ZORRO. I am using a selector multiple to select the objects I want to be in a table. This table has drag and drop functions, and has a text field and a selector in his cells. This looks like this: Image of the table

I want the user to be able to drag and drop the rows of the table by keeping the data introduced in the fields. To do this I have this code:

Component.ts

dragAndDropTableObjects: {
    id: number;
    process: ProductionProcessDto;
    count: number;
    machine: MachineDto;
}[] = [];
selectedDragAndDropTableObjects: {
    id: number;
    process: ProductionProcessDto;
    count: number;
    machine: MachineDto;
}[] = [];

drop(event: CdkDragDrop<string[]>): void {
    moveItemInArray(this.selectedDragAndDropTableObjects, event.previousIndex, event.currentIndex);
}

Component.html

<label>Procesos de producción</label>
<nz-select [nzMaxTagCount]="5" [nzMaxTagPlaceholder]="tagPlaceHolder" nzMode="multiple"
    nzPlaceHolder="Selecciona" [(ngModel)]="selectedDragAndDropTableObjects" name="ppSelector"
    class="searchSelectors">
    @for (pp of dragAndDropTableObjects; track dragAndDropTableObjects) {
    <nz-option [nzLabel]="pp.process.name" [nzValue]="pp"></nz-option>
    }
</nz-select>
<ng-template #tagPlaceHolder let-selectedList>y {{ selectedList.length }} mas seleccionados</ng-template>
<br>

<nz-table [nzData]="selectedDragAndDropTableObjects" [nzFrontPagination]="false" [nzShowPagination]="false">
    <thead>
        <tr>
            <th colspan="3">Orden de los procesos (Arrastra para cambiar)</th>
        </tr>
        <tr>
            <th>Proceso</th>
            <th>Cantidad</th>
            <th>Máquina</th>
        </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="drop($event)">
        @for (data of selectedDragAndDropTableObjects; track data.id) {
        <tr cdkDrag>
            <td>{{ data.process.name }}</td>
            <td>
                <input type="text" class="w-6" [readonly]="fieldsReadOnly" [id]="'ppCount'+data.id" [(ngModel)]="data.count" [name]="'ppCount'+data.id" />
            </td>
            <td>
                <nz-select nzShowSearch nzPlaceHolder="Selecciona una máquina" [(ngModel)]="data.machine"
                    name="machineSelector" class="searchSelectors" [nzDisabled]="fieldsReadOnly">
                    @for (r of MachineDataset; track MachineDataset) {
                    <nz-option [nzLabel]="r.name" [nzValue]="r"></nz-option>
                    }
                </nz-select>
            </td>
        </tr>
        }
    </tbody>
</nz-table>

This is working almost correctly. The problem is that, when I drag and drop a row, the content of this row is “cloned” to the rest of the rows. This is only visual, the array is changing correctly, and this is only happening with the input and the selector, the plain text is working fine.

I tried to refresh the array by doing something like this:

const data = this.selectedDragAndDropTableObjects;
this.selectedDragAndDropTableObjects = [...data];

But it did not work.

Can someone help me?

Thanks in advance.