My service offers a collection of 'Recipe' objects that can be observed
@Injectable({
providedIn: 'root'
})
export class RecipeService {
recipes: Recipe[];
private _recipesSource = new Subject<Recipe[]>();
recipesMessage$ = this._recipesSource.asObservable();
constructor() {
this.recipes = new Array<Recipe>();
this.recipes.push(new Recipe('Recipe1', 1));
this.recipes.push(new Recipe('Recipe2', 2));
this.recipes.push(new Recipe('Recipe3', 3));
this._recipesSource.next(this.recipes);
}
}
In addition, there is an Angular component that generates a vertical button list for each recipe from the RecipeService
@Component({
selector: 'app-recipe-list',
template: `
<div class="btn-group-vertical">
<button
*ngFor="let recipe of rs.recipesMessage$ | async"
type="button" class="btn btn-secondary">
a
</button>
</div>
`
})
export class RecipeListComponent implements OnInit {
recipes: Recipe[];
constructor(private rs: RecipeService) { }
ngOnInit(): void {
this.recipes = new Array();
}
}
The problem I'm facing is that the buttons are not being displayed when the page loads. It seems like my subscription is returning empty results.
PS: Please excuse any shortcomings in my TypeScript skills. I am new to the world of JavaScript and always appreciate feedback.