2

我有一个表单，我有一个 js 对象作为模型。我想检测对象的变化，通知用户需要保存。

为了实现这一点，我目前使用KeyValueDiffers. 它还可以根据需要检测每一个变化。虽然我有一个不想要的效果。

表单是一个自己的组件，我将设置要修改的对象，@Input()它调用一个init()方法，该方法也KeyValueDiffers用新对象初始化。

初始化后，KeyValueDiffers我立即收到更改通知，尽管我用来初始化差异的对象没有更改。为什么会这样？我一无所知...

export class MetadataDetailComponent implements DoCheck {

    constructor(private differs: KeyValueDiffers) { }

    unsavedChanges: boolean = false;
    differ: any;
    metadata: Metadata;
    orgMetadata: Metadata;

    @Input()
    set setMetadata(metadata: Metadata) {
        this.init(metadata);
    }

    private init(metadata: Metadata) {
        this.differ = undefined;
        if (this.metadata && this.unsavedChanges) {
            console.log('unsaved changes!!')

        }
        //Do different init stuff
        this.orgMetadata = metadata;
        this.metadata = new Metadata(metadata.name, metadata.description, metadata.id, metadata.state, metadata.type, metadata.script);
        this.differ = this.differs.find(this.orgMetadata).create(null);
        this.unsavedChanges = false;
    }

    ngDoCheck() {
        if (this.differ) {
            var changes = this.differ.diff(this.metadata);
            if (changes) {
                this.unsavedChanges = true;
                console.log('metadata has changed!');
            }
        }
    }
}

编辑

这是我得到的改变事件 在此处输入图像描述

这似乎是从 null 到 object 的变化。但是，当我已经KeyValueDiffers用对象初始化时，为什么会发生这种变化？

4

1 回答 1

1

我不知道这是否能解决你的具体问题。但是我们遇到了 KeyValueDiffer 的问题，在 ngOnInit 之后的事情发生后，KeyValueDiffer 将“null”作为第一个 diff 的前一个值。我梳理了互联网并没有找到真正的答案，所以我们通过像这样初始化不同来“解决”它

this.differ = this.differs.find(this.orgMetadata).create().diff(this.orgMetadata);

或者可能针对您的具体情况

this.differ = this.differs.find(this.orgMetadata).create().diff(this.metadata);

请注意，在 Angular 6+ 中 create 不再接受参数

于 2019-04-04T19:54:22.203 回答