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


Angular 4 : copy an array to save initial values but both arrays are updated by the form

我是一个初学者，正在开发一个用Jhipster构建并使用Angular4.3的应用程序。

我正在处理一个用户可以编辑颜色的表单。我必须保存初始值，以防用户编辑颜色，但最终无法验证保存(确认模式)。所以我必须回到初始值。但实际上，当我复制初始值时，两个数组都会被表单值更新。

我的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;
    }
}

但问题是，初始颜色的值与颜色的值相同…(当我执行console.log时，两个数组都具有由表单更新的相同RGB)

我的表单如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

有人有主意吗？

不要使用Object.assign([], anotherArr)，也不要为初始颜色指定颜色。克隆它。您可以使用lodash库这样克隆数组：

1
2
3
4
5
6
7
8
9
10
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);
    }

代码示例

在您的例子中，两个数组对象引用是相同的：

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

因此，在窗体中编辑相同的对象数组

如果你因为某种原因不能做到的话。在javascript中深度复制嵌套对象数组