带有可观察对象的反应形式和动态复选框

Question

在我的应用程序中，我需要创建一个反应式表单，其中包含将随可观察返回的动态创建的复选框。

这些复选框将是我在系统中注册的用户，银行应存储所选的用户ID，并且当我在屏幕上显示表单时应显示所选的用户。

我正在使用 Cloud Firestore 保存数据，我从数据库中获取数据，并使用 Ngrx 将其保存在应用程序状态。

任何时候我都可以有更多的用户，因此我应该从我的反应式表单中添加和删除复选框。我有一个代码，但是它不能满足我的需要，我想要一个真正的功能逻辑，因为我在创建满足我的需求的算法时遇到了麻烦。

user.selector.ts

export const getProfessionals = createSelector(
    getEntities,
    (entities): any => {
        return Object.keys(entities).
            map(id => entities[id]).
            filter(data => data.type_user === 'p');
    }
);

export const getUserSelected = createSelector(
    getEntities,
    fromRoot.getRouterState,
    (entities, router): any => {

        let selecteds = [];
        const userSelected = entities[router.state.params.id];

        if (userSelected && userSelected.type_user === 'r') {
            const professionals = Object.keys(entities)
                .map(id => entities[id])
                .filter(data => data.type_user === 'p');

            selecteds = professionals
                .map(v => userSelected.professionals.includes(v.id));
        }

        return {...userSelected, professionals: selecteds};
    }
);

component.ts：

user$ = this._store.select(userSelectors.getUserSelected);
professionals$ = this._store.select(userSelectors.getProfessionals);
professionalsDisplay: any[];

createForm(): void {
    this.myForm = this._formBuilder.group({
        id: new FormControl(''),
        avatar: new FormControl(''),
        type_user: new FormControl('r', Validators.required),
        subscriber: new FormControl(false),
        name: new FormControl('', Validators.required),
        email: new FormControl('', [Validators.required, Validators.email]),
        administrator: new FormControl(false),
        genre: new FormControl('', Validators.required),
        professionals: this._formBuilder.array([]),
        password: new FormControl(''),
        passwordConfirm: new FormControl(''),
    });

    this.user$
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((user) => {
            if (user) {
                this.myForm.patchValue(user, { emitEvent: false });
                user.professionals.forEach(value => this.usersForm.push(new FormControl(value)));
            }
        });

    this.professionals$
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((professionals) => {
            this.professionalsDisplay = professionals;
            const values = professionals.map(v => new FormControl(false));
            this.myForm.addControl('professionals', this._formBuilder.array(values));
        });
}

get usersForm(): AbstractControl[] {
    return (<FormArray>this.myForm.get('professionals')).controls;
}

component.html：

<div class="h3 blue-fg">
     Which professionals do you attend?
</div>

<div fxLayout="column" fxLayout.xs="column" fxLayoutAlign="start start">
    <div formArrayName="professionals" *ngFor="let userForm of usersForm; let i = index">
    <mat-checkbox fxFlex="100" [formControlName]="i">{{ 
     professionalsDisplay[i]?.name }}</mat-checkbox>
    </div>
</div>

我需要在专业阵列中保存已选择用户的ID，然后在屏幕上显示时，我需要显示可供选择的用户并标记哪些用户已被选中。

上面的

代码问题是当我将数据加载到表单中并更改复选框时，我看到复选框不会更改表单的值，也不会输入用户的ID被选中。