如何從 Observable 向子組件的 @Input 傳遞數據

Question

我有一個 angular 組件，用作 html 頁面上 for 循環中的選項卡：

...
<ng-container *ngFor="let tabData of data$ | async;">
  <tab-component
   id="{{ tabData.id }}"
   name="{{ tabData.name }}"
  >
  </tab-component>
</ng-container>
<child-component [selectedData]="selectedData"></child-component>

在 .ts 文件中：

public data$: Observable<Data[]>
public selectedData: Data

ngOnInit() {
  this.data$ = this.service.getAllData();
}

ngAfterContentInit() {
  this.data$.subscribe(items => this.selectedData = items[0])
}

我希望第一個選項卡在第一次加載頁面（數組中的元素 0）時默認始終是 selectedData。 然后單擊或右/左箭頭鍵，動態更新傳遞給子組件的 selectedData 的值。 到目前為止，我已經嘗試了所有方法，並且子組件中 selectedData 的值始終未定義

請幫助我，我怎樣才能做到這一點！

Answer 1

1. 在ngOnInIt本身中訂閱 allData 並在分配它之前檢查items的值 - 無論你是否得到它，如果你無法在那里找到值，那么getAllDataService一定有問題。
2. 對於子組件，使用雙引號傳遞這樣的值： <child-component [selectedTab]="selectedTab"></child-component>
3. 在父級（或硬編碼值）中創建一個虛擬變量並將其傳遞給子級。 如果您的子組件工作正常，那么只有數據以及您如何分配數據存在問題。

希望這可以幫助！

Answer 2

您在模板 HTML 文件中究竟在哪里使用selectedData ？

在您提供的片段中，使用了一個selectedTab ，但在任何地方都沒有selectedData ...

<ng-container *ngFor="let tabData of data$ | async;">
  <tab-component
   id="{{ tabData.id }}"
   name="{{ tabData.name }}"
  >
  </tab-component>
</ng-container>
<child-component [selectedTab]=selectedTab></child-component>

此外，您可以遵循@Eugene 的建議並執行以下操作：

ngOnInit() {
   this.data$ = this.service.getAllData().pipe(
      tap((items) => this.selectedData = items[0])
   );
}

不使用ngAfterContentInit()並且需要第二次訂閱。

Answer 3

您可以使用主題來表達當前選擇的選項卡數據，然后使用combineLatest創建兩個來源的 observable。

private data$: Observable<Data[]> = this.service.getAllData();
private selectedData$ = new BehaviorSubject<Data>(undefined);

vm$ = combineLatest([this.data$, this.selectedData$]).pipe(
    map(([tabData, selected]) => ({
        tabData,
        selectedTab: selected ?? tabData[0]
    })
);

setSelected(data: Data) {
  this.selectedData$.next(data);
}

在這里，我們使用combineLatest創建視圖可以使用的單個 observable（視圖 model ）。 每當它的任何一個源發出時，這個 observable 都會發出。

我們將selectedData$ BehaviorSubject設置為發出undefined的初始值。 然后，在 map 內部，我們將selectedTab屬性設置為在尚未設置選擇時使用tabData[0] 。 因此，最初，它將使用tabData[0] ，但在setSelected()之后，它將使用該值。

<ng-container *ngIf="let vm$ | async as vm">

  <tab-component *ngFor="let tabData of vm.tabData"
    [id]    = "tabData.id"
    [name]  = "tabData.name"
    (click) = "setSelected(tabData)">
  </tab-component>

  <child-component [selectedTab]="vm.selectedTab"></child-component>

</ng-container>

Answer 4

我設法得到它，以便在子端傳遞的值不再使用 ngIf 未定義，所以：

<child-component *ngIf=selectedData [selectedData]="selectedData"></child-component>