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

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)

Continue reading...