Angular：如何像往常一样从几个可观察的数组中收集数据？

Question

我需要做下一个 - 从后端获取数据并将其转发到子组件：

...

@Component({
  selector: 'my-component',
  template: `<my-child-component [data]="data"></my-child-component>` 
})

public data = [];

ngOnInit() {
  this.service.getParentData().subscribe(res =>  {
    res.map(r => this.service.getChildDatas(r.id)
      .subscribe(child => this.data.push(child)));
  });
}

但是在子组件中，当我尝试在 ngOnChanges 中打印数据时，我看到奇怪的数组，我可以看到元素，但长度等于 0 :

它是如何工作的以及如何实现我的目标（将数据传递给子级并像处理数组一样处理数据）？

Answer 1

您似乎有2个要管道的可观察物，一个接一个。
您需要使用 rxjs operators 实现这一目标。

实现它的方法是使用操作员

然后使用 forkjoin 操作员结果作为列表，

假设您首先收到一个数组，并且需要每个数组值通过您拥有的另一个服务来获取孩子

ngOnInit() {
  this.service.getParentData()
          .pipe(switchMap((parentData: {id: string}[]) => {
                 return forkJoin(parentData.map(r => 
                     this.service.getChildDatas(r.id))
                 })
      .subscribe((childData: any[]) => {this.data = childData});
}

Answer 2

ngOnChange - 当指令的任何数据绑定属性发生更改时调用的生命周期挂钩。

这里您绑定一个数组，并且该数组被视为对象。这意味着当您发送新对象时，ngOnChange 将被触发，在我们的例子中是一个新数组（意味着新的引用 ID）。

Angular 使用相等检查运算符 === 来检测指令的输入何时发生变化。
=== 运算符检查其正在检查的对象中的引用更改。

在这里您正在更改对象的内容，而不是对象引用。

ngOnChange 将会被触发，无论是任何类型的Object，当有一个引用改变时就意味着新的Object。

所以第一个解决方案是

ngOnInit(){
this.service.getParentData().subscribe(res =>  {
    res.map(r => this.service.getChildDatas(r.id)
      .subscribe(child => {
        this.data.push(child);
        this.data = [...this.data]; // It will re assign new instance 
          data(Array) on every push
      }));
  });
} 

但我建议您在这里稍微优化一下代码，就像

ngOnInit(){
  this.service.getParentData().pipe(
    concatMap((res) => this.service.getChildDatas(res.id))
  ).subscribe({
     next: (res) => {
       this.data.push(res);
       this.data = [...this.data];
     },
  });
} 

第二个解决方案
通过将自定义对象与角度 trackBy 绑定。 Angular 将通过 trackBy 索引而不是对象引用来比较对象的相等性，这也将提高性能。

<my-child-component [data]="{trackBy:data.length,data:data}"></my-child-component>

ngOnChanges(changes: SimpleChanges): void {
   console.log(changes.data.currentValue.data);
}

更新：
你使用了.push，所以我假设你正在接收一个数据，但是如果你正在接收一个数组，那么你可以将res数组分配给this.data，通过这样做 当您

ngOnInit(){
      this.service.getParentData().pipe(
        concatMap((res) => this.service.getChildDatas(res.id))
      ).subscribe({
         next: (res) => {
           this.data = res;
         },
      });
    } 

。

可能要同时处理多个属性更改或希望对多个属性执行某些操作时，请使用 ngOnChanges

但如果你想处理特定的属性更改，那么更好的选择是与 @Input 一起使用 setter。

@Input() set data(data:any[]){
    console.log(data);
  };

我发现这个博客非常有帮助 使用 ngOnChanges 和 Setters 检测 Angular 中的@输入更改