angular - Reaktivt formulär och dynamiska kryssrutor med Observables

I min applikation behöver jag skapa ett reaktivt formulär som kommer att innehålla kryssrutor som kommer att skapas dynamiskt med returvärdet från en Observable.

Dessa kryssrutor kommer att vara användare som jag har registrerat i systemet, banken ska lagra det valda användar-ID:t, och när jag visar formuläret på skärmen ska de valda användarna visas.

Jag använder Cloud Firestore för att spara data, jag hämtar data från databasen och sparar det i tillståndet för min applikation med Ngrx.

När som helst kan jag ha fler användare, så jag borde lägga till och ta bort kryssrutor från mitt reaktiva formulär. Jag har en kod men den uppfyller inte vad jag behöver, jag skulle vilja ha en riktigt fungerande logik, eftersom jag har problem med att skapa en algoritm som uppfyller mina behov.

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>

Jag behöver spara i databasen ID:t för de användare som har valts i en professionell array, och sedan när det ska visas på skärmen behöver jag visa de användare som är tillgängliga för urval och markera vilka användare som har valts.

Kodproblemet ovan är att när jag laddar data i formuläret och ändrar kryssrutorna ser jag att kryssrutorna inte ändrar värdet i mitt formulär och inte anger ID:t för den användare som är markerad.