Question

我正在使用DashboardComponent来获取DashboardService的数据。然后，该Component将我的对象数组传递给我的表单组件。

（帖子底部的Plunkr链接）

DashboardComponent.ts

 private bottleArray: Bottle[] = [];

  ngOnInit() {
    // Get bottle types from service to the form needing them
    this.dashboardService.getBottleTypesAndNames()
      .subscribe(bottlesData => {
        bottlesData.forEach(bottle => {
          // Convert to Bottle type
          let bottleObject: Bottle = new Bottle(bottle.bottleTypeId, bottle.bottleName);
          this.bottleArray.push(bottleObject);
        });
      });
  }

DashboardComponent.html

<ct-create-order-form [bottleArray]="bottleArray"> </ct-create-order-form>

我是这样做的，这样我链接到Dashboard的表单组件就不会对我的服务进行任何调用。

我正在尝试clone我的@Input，以便我从表单更新的数据没有链接到我的父组件（仪表板），但我似乎无法这样做...请参阅下面的代码：

CreateOrderFormComponent.ts

export class CreateOrderFormComponent implements OnChanges {
  @Input() private bottleArray: Bottle[];

  constructor() { }

  private clonedBottleArray: BottleCommand[];

  ngOnChanges(changes) {

    if (changes.bottleArray) {
      let test: BottleCommand[] = changes.bottleArray.currentValue;

      // Cloning
      console.log(test);  // Array of 6 Bottles

      this.clonedBottleArray = [...test];       
      console.log(this.clonedBottleArray);         // Empty Array
      this.clonedBottleArray = Array.from(test);
      console.log(this.clonedBottleArray);         // Empty Array
      this.clonedBottleArray = test.slice();
      console.log(this.clonedBottleArray);         // Empty Array

      this.clonedBottleArray = test;
      console.log(this.clonedBottleArray);         // Array of 6 bottles
   }
}

有没有办法实现我的目标？我不明白为什么在获取数据时无法克隆输入？

从AngularConnect制作的这个Youtube视频中，除了他正在操纵一个对象外，他正在做同样的事情，我正在操纵一个Objets数组。

https://youtu.be/-nsedZwvl9U?t=12m22s

编辑：创建一个Plunkr后，这似乎在那里正常工作。

https://plnkr.co/edit/js1vl0fcgOKtQNqXsWTL?p=preview

编辑2 ：在我ngOnInit()的{{1}}，如果我模拟数据，则会在我的子组件中正确克隆。

Answer 1

看起来角度OnChange由于其特定的检查方式而未触发，这里有来自this answer的简要说明：

在变更检测期间，当Angular检查组件时输入属性进行更改，它使用（基本上）===进行脏检查。对于数组，这意味着对数组引用（仅）进行脏检查。由于rawLapsData数组引用没有改变，因此不会调用ngOnChanges（）。

在您的示例中，您在.push中{{}} bottleArray瓶，因此OnChange不会触发相同的数组引用。

要获得更改，您可以使用DoCheck：

ngDoCheck() {
  console.log(this.bottleArray);
  this.clonedBottleArray = [...this.bottleArray].slice(0, 4);
  console.log(this.clonedBottleArray);
}

将新值推送到bottleArray时会触发。工作人员here。

Angular2 ngOnChanges克隆@Input数组

1 个答案: