Angular：我怎樣才能像往常一樣從一些可觀察的陣列中收集資料？-有解無憂

我需要做下一個 - 從后端獲取資料并將其轉發給子組件：

...

@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：

Angular：我怎樣才能像往常一樣從一些可觀察的陣列中收集資料？它是如何作業的，我怎樣才能實作我的目標（將資料傳遞給孩子并像使用陣列一樣使用資料）？

uj5u.com熱心網友回復：

您似乎有 2 個要通過管道傳輸的可觀察物件，一個接一個。您需要使用rxJS 運算子來實作這一點。

實作它的方法是使用運算子switchMap或 mergeMap ，具體取決于您是否希望第一個的更改重新觸發第二個。

然后使用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});
}

uj5u.com熱心網友回復：

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];
     },
  });
}

第二種解決方案 通過將自定義物件與 angular 系結trackBy。角度將通過索引而不是物件參考來比較物件的相等性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;
         },
      });
    }

多一個Update

ngOnChanges當您可能同時處理多個屬性更改或希望對多個屬性執行某些操作時使用。

但是如果你想處理特定的屬性更改，那么更好的選擇是同時使用 setter @Input。

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

我發現這個博客很有幫助Detecting @Input changes in Angular with ngOnChanges and Setters

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450133.html

標籤：有角度的 rxjs ngrx

上一篇：如何將類從Angular12和Typescript中的父組件添加到子組件布局？

下一篇：如何回傳不同型別的可觀察物件