angular: how to handle async pipes correctly

Issue

This Content is from Stack Overflow. Question asked by user16405471

I would like to display all users after all controls were added to the ProfileForm. That´s why I tried using the async pipe on my observable users$. But obviously it displays the users before all controls were added and not after. How do I wait until all controls are added?

ts:

profileForm = this.fb.group({
    name: []
});

users$: Observable<Users[]>;


ngOnInit(): void {
    this.users$ = this.userService.getAllUsers();

    this.users$.forEach(user =>
        this.profileForm.addControl(`user_${user.id}`, this.fb.control(id));
    );
}

html:

<mat-expansion-panel *ngFor="let user of users$ | async">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <mat-checkbox [formControlName]="'user_' + user.id"></mat-checkbox>
            <span>{{ user.name }}</span>         
        </mat-panel-title>
    </mat-expansion-panel-header>
</mat-expansion-panel>



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?