typescript - Angular 4: kopier et array for å lagre opprinnelige verdier, men begge arrayene oppdateres av skjemaet

Jeg er en nybegynner og jobber med en app bygget med JHipster og bruker Angular 4.3.

Jeg jobber med et skjema hvor en bruker kan redigere farger. Jeg må lagre de opprinnelige verdiene i tilfelle en bruker redigerer farger, men ikke endelig bekrefter lagringen (bekreftelsesmodal). Så jeg må gå tilbake til de opprinnelige verdiene. Men egentlig, når jeg lager en kopi av de opprinnelige verdiene, blir begge arrayene oppdatert av skjemaets verdier.

Koden min ser slik ut:

export class MyComp implements OnInit {
    initialColors: Color[]; // the object Color has an id, a name and a rgb as attributes
    colors: [];

    constructor(private service: ColorService, private confirmationDialogService: ConfirmationDialogService) {}

    ngOnInit() {
        this.getColors();
    }

    getColors() {
        this.service.query.subscribe(
            this.colors= res.json;
            this.initialColors= Object.assign([], this.colors); // I've tried with res.json too
        },
            (res: ResponseWrapper) => this.onError(res.json)
        );
    }

    submitColors(form) {
        this.confirmationDialogService.confirm('Validation','Do you want to save changes ?')
        .then((confirmed) => {
            if (confirmed === true) {
                // stuff to save is OK
            } else { // want to return to initial state
                this.colors= this.initialColors;
    }
}

Men problemet er at initialColors har tatt de samme verdiene som colors... (når jeg gjør console.log har begge arrayene de samme rgb-verdiene oppdatert av skjemaet)

Min form ser slik ut:

<form #colorForm="ngForm" (ngSubmit)="submitColors(colorForm.form.value);">
            <table>
                <tr *ngFor="let c of colors| orderBy: 'id';">
                    <td>{{c.label| translate}} :</td>
                    <td>
                        <input type="color"
                               [(ngModel)]="c.color"
                               #nameField="ngModel"
                               name="{{c.label}}"
                               (ngValue)="c.color"
                               [ngStyle]="{'color-rendering': c.color}"/>
                    </td>
                </tr>
            </table>
            <button type="submit" class="btn btn-sm">
                <span class="fa fa-save"></span>
                <span class="d-none d-md-inline" jhiTranslate="entity.action.save">Save</span>
            </button>
        </form>

Har noen en idé?

Svar #1

Ikke bruk Object.assign([], anotherArr) og ikke tildel farger til initialColors. Klon det. Du kan bruke lodash-biblioteket for å klone array slik:

submitColors(form) {
        this.confirmationDialogService.confirm('Validation','Do you want to save changes ?')
        .then((confirmed) => {
            if (confirmed === true) {
                // stuff to save is OK
            } else { // want to return to initial state
                // 

                this.colors= _.cloneDeep(this.initialColors);
    }

Kodeeksempel

I ditt tilfelle er to objektreferanser i arrayet de samme:

this.colors[0] == this.initialColors[0] // true

Derfor redigerer du den samme listen med objekter i form

Hvis du ikke kan bruke lodash av en eller annen grunn. Dyp kopiering av array med nestede objekter i JavaScript