javascript - Angular 6 属性绑定(bind)在多级对象上无法正常工作

Question

我正在制作一个新应用程序作为宠物项目，但我的一个组件表现错误。

我有一个复杂的对象，用于存储 D&D 怪物的信息。该组件用于选项数量更改器，带有加号和减号按钮，用于增加和减少数量。

当我将它用于第 1 层子级(即 monster.strength)时，它可以正常工作，并且会增加到最大数量，并减少到基本值(但不会低于基本值)当我将它用于第 2 层子级(即 Monster.speed.base)时，它会正确递增，但它实际上会更改 Basemonster 值以及 selectedmonster，从而阻止递减工作。

下面的代码显示了如何将对象添加到文档中。

<option-quantity *ngIf="mod.location === 'base'"
     [max]="90"
     [step]="5"
     [costval]="mod.cost" 
     [baseval]="baseMonster[mod.type][mod.location]" 
     [(totalcost)]="selectedMonster.cost" 
     [(optval)]="selectedMonster[mod.type][mod.location]">
 </option-quantity>

这是组件 TS 文件

import { Component, Input, Output } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Component({
  selector: 'option-quantity',
  templateUrl: './option-quantity.component.html',
  styleUrls: ['./option-quantity.component.css']
})
export class OptionQuantityComponent {
  @Output('optvalChange') emitter1: EventEmitter<number> = new EventEmitter<number>();
  @Output('totalcostChange') emitter2: EventEmitter<number> = new EventEmitter<number>();
  @Input('baseval') set setBaseVal(value) {
    this.base = value;
  }
  @Input('optval') set setOptValue(value) {
    this.count = value;
  }
  @Input('costval') set setCostValue(value) {
    this.cost = value;
  }
  @Input('totalcost') set setTotalCostValue(value) {
    this.totalcost = value;
  }
  @Input('step') set setStepValue(value) {
    this.step = value;
  }
  @Input('max') set setMaxValue(value) {
    this.max = value;
  }

  step = 1;
  max = 10;
  base = 0;
  count = 0;
  cost = 0;
  totalcost = 0;

  increment() {
    if (this.count < this.max) {
      this.count += this.step;
      this.totalcost += this.cost * this.step;
      this.emitter1.emit(this.count);
      this.emitter2.emit(this.totalcost);
    }
  }

  decrement() {
    if (this.count > this.base) {
      this.count -= this.step;
      this.totalcost -= this.cost * this.step;
      this.emitter1.emit(this.count);
      this.emitter2.emit(this.totalcost);
    }
  }

  onChange() {
    this.emitter2.emit(this.totalcost);
    this.emitter1.emit(this.count);
  }

}

我已经验证问题出在第 2 层子级上，因为我尝试将统计数据移动到统计子级中，并将速度移动到根。这使得统计数据停止工作并且速度工作正常。我可以将速度移动到对象的根部，但我不愿意。

使用这些值的组件是 create-undead 组件，baseMonster 是通过此函数创建的:

  setBase() {
    this.baseMonster = Object.assign({}, this.selectedMonster);
    this.currentSize = this.baseMonster.size;
    this.previousSize = this.baseMonster.size;
  }

整个项目可以在我的GitHub repo中查看

更新:我尝试过使用 Object.spread 而不是分配，但这没有任何区别。如果我使用 Object.freeze 并对“baseMonster”对象进行深度卡住，该对象将不会更改，但“selectedMonster”将停止更新其第 2 层子值。

任何帮助将不胜感激。

Answer 1

问题在于您的复制方式:

this.baseMonster = Object.assign({}, this.selectedMonster);

Object.assign 不会执行对象的深层复制，如 here 中所述。 :“如果源值是对对象的引用，则它仅复制该引用值。”

这个answer有一个简单的方法:

clonedObj = JSON.parse(JSON.stringify(originalObj))

这个other answer有关于该主题的详细解释。