Angular 5 - Populate Options In mat-select With Objects? Not With NgFor?

Question

NgFor populates a dropdown or list by iterating through an array. However, Observables give us a stream of data, in my case objects, that is already "iterated". Why loop? Just get to work making options.

{skill_id: 8, skill_name: "Whatever"}
{skill_id: 9, skill_name: "Something"}

It seems that I shouldn't need an array when I have such a nice stream of objects that should replace NgFor. I'm thinking something like this and creating a new option as objects are received from the Observable:

<mat-select  placeholder="Select one">
    <mat-option (click)="loadIdValueInForm(skill_id)"
                    [value]="skill_name">{{skill_name}}
    </mat-option>
</mat-select>

There are a variety of older posts that do this in various ways from an array of objects, but it would be better if we could do it with the results of a common Observable setup. Any ideas? Anyone creative about this?

private getListData(dbTable) {
    this.skills$ = this.httpService.getDropDownList(dbTable)
      .map(data => data.resource)
      .switchMap(data => data)

Answer 1

If you want to iterate over an observable, you can use the async pipe for that.

In your example:

<mat-option (click)="loadIdValueInForm(skill_id)"
                    *ngFor="let skill of skills$ | async"
                    [value]="skill.skill_name">{{skill_name}}
    </mat-option>

Then you can remove the following part from your code:

.map(data => data.resource)