Trying to make a copy of array to then compare it with array to see if it changes

Question

In my Angular program, I have a table where whenever you click on a row, it goes into a different component, row-edit.component, and the row is turned into input boxes so that you can edit the data and passed the number of the row that's selected. I want to be able to make a copy of the array that's displayed in the table so that if someone changes something they didn't mean to, they can just hit a cancel button and it will reset the row to what it originally was. How can I make a copy of the array? - I thought what I had worked, but when it's displayed to the console, I'm just getting undefined

Here's the model of my array:

  public class PTOData
  {
    [Key]
    public int ID { get; set; }
    public int EmpKey { get; set; }
    public string type { get; set; }
    public DateTime date { get; set; }
    public string fullhalf { get; set; }
    public int hours { get; set; }
    public string scheduled { get; set; }
    public string notes { get; set; }
    public bool inPR { get; set; }
    public DateTime? prDate { get; set; }
  }

  }

here's where the main function is called in my .html:

    <button class="btn btn-default btn-primary btn-sm" (click)="resetRow(pto)"><i class="fa fa-ban" aria-hidden="true"></i></button>

and here's the relevant parts of my .ts file, the console.log(this.origPTO); is just so I can see what's printing out and currently, I'm getting undefined in the console

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import { PTOData } from './pto-data';
import { PTODataService } from './pto-data.service';
import { EmpInfo } from './emp-info';
import { EmpInfoService } from './emp-info.service';

@Component({
    selector: '[pto-row-edit]',
    templateUrl: `./row-edit.component.html`,
    styleUrls: ['./row-edit.component.css']
})

export class RowEditComponent {

    // Inputs & Outputs to/from grid component
    @Input() pto: PTOData[];
    @Input() rowSelected: number;

    @Output() onDelete = new EventEmitter<number>();
    @Output() onSave = new EventEmitter<number>();

    origPTO: PTOData[] = this.pto;

    constructor(
        private ptodataService: PTODataService,
        private empInfoService: EmpInfoService) { }

    resetRow(pto: PTOData): void {
        console.log(this.origPTO);
        this.rowSelected = null;
        this.onSave.emit(this.rowSelected);
    }
}

https://stackoverflow.com/questions/34688517/how-can-i-use-angular-copy-in-angular-2 — HaveSpacesuit, Jul 06 '17 at 17:47
@HaveSpacesuit would I not be able to just set a variable equal to the array? also when doing `const copy = { this.pto};`, I get an error on the `.` that says "`':'" expected.`" or when doing `const copy = this.pto;`, I get "`a class member cannot have the 'const' keyword.`" — rcarcia02, Jul 06 '17 at 17:54
I haven't looked too deeply at your code, but if you're setting a variable equal to the array, you're actually creating a reference to it. So if you change the array, the new variable will have the changes, so you wouldn't be able to revert. In AngularJS, you could do `angular.copy` to create a deep copy. That's what I would look into. — HaveSpacesuit, Jul 06 '17 at 17:56
@HaveSpacesuit okay, how would I set it to a variable though? Whenever I do it, I just get `undefined` in the console. — rcarcia02, Jul 06 '17 at 18:06

score 1 · Answer 1 · answered Jul 06 '17 at 18:19

1

Your assignment statement origPTO: PTOData[] = this.pto; happens before the @Input() occurs. Instead, put the assignment in the OnInit lifecycle hook:

import { OnInit } from '@angular/core';

export class RowEditComponent implements OnInit {

    @Input() pto: PTOData[];
    origPTO: PTOData[];

    ngOnInit(): void {
        this.origPTO = this.pto;
    }
}

This still is not what you want, since it is not making a deep copy. Any changes to pto will also be made to origPTO. You should loop through the original array to make a deep copy:

this.origPTO = [];
this.pto.forEach(x => this.origPTO.push(x));

answered Jul 06 '17 at 18:19

HaveSpacesuit

3,572
6
40
59

thanks! but, whenever I do that in the `ngOnInit()` function to loop through the array, I get an error in the console that says `this.pto.forEach is not a function` – rcarcia02 Jul 06 '17 at 18:30
You might have to do some debugging and make sure you're passing something into the input. – HaveSpacesuit Jul 06 '17 at 18:49
On second thought, it looks like your `PTOData` is an object, not an array. So, you should be declaring `@Input() pto: PTOData;` and `origPTO: PTOData;`. Then try setting `this.origPTO = this.pto` in the `ngOnInit` and don't iterate over anything. – HaveSpacesuit Jul 06 '17 at 18:53
they both just change together. I'll need to find a way of making a deep copy. I used the console to see that I was bringing something in, it just kept saying that forEach wasn't a function and I'm not quite sure why – rcarcia02 Jul 06 '17 at 19:02

Trying to make a copy of array to then compare it with array to see if it changes

1 Answers1