angular - 在这种情况下，如何从多个可观察对象中获取单个可观察对象？

Question

这是我的情况。我有一个跨越多个选项卡并保存两个值的表单numberOfUsers，它是一个数字，users它是一个用户数据数组（id、name、address、city）。

每个选项卡都是动态创建的，并且有一个名为“user”的重复 formGroup，它是 formArray 的一部分。每个选项卡最多可以容纳 3 个用户表单组。

我想做的是users用所有创建的用户组的值更新我的主表单数组。现在，我在每个选项卡中都有一个不同的表单，其中包含不同的用户数据。我在服务中使用动态 BehaviorSubject 来收集和传输来自辅助表单的数据。这是服务：

export class BroadcasterService {

    // subject 
    protected _eventsSubject = new BehaviorSubject<any>({});
      constructor() {
      }
    broadcast(key: any, value: any) {
        this._eventsSubject.next({ key, value }); // here we are setting the key and value of our subject
    }

    on<T>(key: any): Observable<T> {
        return this._eventsSubject.asObservable()
            .pipe(

                filter(e => e.key === key),
                map(e => e.value)
            );
    }

每个表单都设置它key并将其传递value给behaviorSubject这样的：

 onChanges(): void {
       this.usersArray.valueChanges
            .subscribe(val => {
                this.broadcaster.broadcast('BIS_' + this.tabNumber, val);
            }); 

    }

然后在我的主要组件上，我订阅了所有的 observables，我假设我必须连接或合并它们或做其他事情，以便获得一个可更新users主窗体上的 formArray 的 observable。这是我正在做的事情：

  let main: Observable<[]> = this.broadcaster.on("Main");
  let bis1: Observable<[]> = this.broadcaster.on("BIS_1");
  let bis2: Observable<[]> = this.broadcaster.on("BIS_2");

  Observable.concat(main, bis1, bis2).subscribe(values => {

                                              values.forEach(value => {

                                                        this.addUser();
                                              });

                                              this.usersArray.patchValue( values );

  });

显然，我做错了什么。我是 rxjs 的新手。我什至不知道这种方法是否正确……我得到了多个具有空值的订阅，并且根据连接的可观察对象中可观察对象的顺序，我得到不同的结果。有人可以帮我解决这个问题吗...？

这是一个闪电战，以便更好地理解。

https://stackblitz.com/edit/bis-tabs

标签： angularrxjsobservableangular-reactive-formsformarray