Angular 4：复制一个数组以保存初始值，但两个数组都由表单更新

Posted 2023-02-22

【中文标题】Angular 4：复制一个数组以保存初始值，但两个数组都由表单更新

【英文标题】：Angular 4 : copy an array to save initial values but both arrays are updated by the form

【发布时间】：2018-09-02 10:15:37

【问题描述】：

我是一名初学者，正在开发一个使用 JHipster 构建并使用 Angular 4.3 的应用程序。

我正在开发一种用户可以在其中编辑颜色的表单。我必须保存初始值以防用户编辑颜色，但最终没有验证保存（确认模式）。所以我必须回到初始值。但实际上，当我复制初始值时，两个数组都由表单值更新。

我的代码如下所示：

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;
    

但问题是 initialColors 采用与颜色相同的值...（当我执行 console.log 时，两个数组都具有由表单更新的相同 rgb）

我的表单如下所示：

<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>

有人有想法吗？

【参考方案1】：

不要使用Object.assign([], anotherArr) 并且不要将颜色分配给initialColors。克隆它。您可以使用 lodash 库像这样克隆数组：

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);
    

Code example

在您的情况下，两个数组对象引用是相同的：

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

因此，您在表单中编辑相同的对象数组

如果你因为某种原因不能lodash。 Deep copying array of nested objects in javascript