0

我正在使用DashboardComponent从我的DashboardService. 然后，此组件将我的对象数组传递给我的表单组件。

（帖子底部的Plunkr链接）

仪表板组件.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);
        });
      });
  }

仪表板组件.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 视频中，他正在做同样的事情，除了他正在操纵一个对象，而我正在操纵一个对象数组。

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

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

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

编辑 2： 在ngOnInit()from myDashboardComponent中，如果我模拟数据，它会在我的子组件中正确克隆。

4

1 回答 1

0

看起来有角度的 OnChange 由于其特定的检查方式而没有触发，以下是此答案的简要说明：

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

在您的示例中，您将.push瓶子放入bottleArray，因此 OnChange 不会在同一个数组引用上触发。

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

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

当您将新值推送到bottleArray. 在这里工作的笨蛋。

于 2017-01-12T16:00:34.330 回答