Question

我想在this.viewSegmentsForAnalysis = this.segmentsForAnalysis;期间只设置一次ngOnInit()。但是，当我调用此方法addSegmentsForAnalysis()时，它会将this.viewSegmentsForAnalysis的值更新为this.segmentsForAnalysis。什么可能导致它更新？

ngOnInit() {
  this.segmentsForAnalysis = this.submissionDetails.segmentations.filter((segment) => {
        return segment.columns.length === 1;
      });

  this.viewSegmentsForAnalysis = this.segmentsForAnalysis;
}

addSegmentsForAnalysis() {
   this.segmentsForAnalysis.push({
      name: this.fileColumn.value,
      overlapAnalysis: false,
      columns: [{
        index: segmentIndex,
        name: this.segmentTitle.value
      }]
    });
}

Answer 1

this.viewSegmentsForAnalysis = this.segmentsForAnalysis; 当您使用segmentsForAnalysis分配viewSegmentsForAnalysis时，viewSegmentsForAnalysis会引用与segmentsForAnalysis相同的对象。当您在segmentsForAnalysis中更改任何内容时，显然两个引用同一对象的变量将会明确更新。

要解决您的问题，您需要为viewSegmentsForAnalysis创建另一个对象。要做到这一点，请替换this.viewSegmentsForAnalysis = this.segmentsForAnalysis;与

this.viewSegmentsForAnalysis = JSON.parse(JSON.stringify(this.segmentsForAnalysis));

Answer 2

您可以使用.slice()方法为引用的数组对象提供一组新值。它将基于您的数组segmentsForAnalysis，它将创建一个新的集合。因此，除非您再次致电ngOnInit，否则不会更新 _{除非您再次创建组件，否则不会发生。}

所以使用这个：

ngOnInit(){
 .......
    this.viewSegmentsForAnalysis = this.segmentsForAnalysis.slice();
        //  add .slice here -------------------------------^^^^^^^^
}

无任何理由更新Angular 4属性

2 个答案: