Despite my extensive search efforts online, including watching YouTube videos and enrolling in Udemy courses, I have not been able to find the solution to my issue. My goal is to take an observable retrieved from Firebase and populate it into a dropdown menu.
Currently, I am successfully fetching data from Firebase and displaying it on the page as a list. However, I seem to be missing a key step in transforming this data into a dropdown selection.
Below is the code I am working with:
.ts
import { FormsModule } from '@angular/forms';
import { Component, OnInit, } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
@Component({
selector: 'app-home-three',
templateUrl: './home-three.component.html',
styleUrls: ['./home-three.component.scss']
})
export class HomeThreeComponent {
jobCategory$;
constructor(private db: AngularFireDatabase) {
}
ngOnInit(){
this.jobCategory$ = this.db.list('/jobCategory').valueChanges();
}
}
my .html
<div class="col-lg-4">
<div class="form-group">
<select>
<option>All Categories</option>
<option *ngFor="let jobCategories of jobCategory$" [ngValue]="jobCategories">
{{ jobCategories }}
</select>
<!--This needs to pull categories from database -->
</div>
I have attempted to convert the observable into an array using:
//this.jobCategory = Array.of(this.jobCategory$)
While this allowed me to display [object Object] in the dropdown, I have not been able to achieve the desired outcome. Any assistance would be greatly appreciated.