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层子级上，因为我尝试将统计信息移到stats子级中，并且将速度移到了根级。这使得统计信息停止工作并且速度正常。我可以将速度移到对象的根，但是我不愿意。

使用值的组件是createMondead组件，此函数创建baseMonster：

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

可以在我的GitHub repo

中查看整个项目

更新：我尝试使用Object.spread而不是Assign，但这没有任何区别。如果我使用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对该主题进行了详细说明。

Angular 6属性绑定不适用于多级对象

1 个答案: