ngFor gives an error even tho I have already imported BrowserModule, and CommonModule

Question

Error: Property binding ngForOf not used by any directive on an embedded template Error especifically occurs because of the * in ngFor. If I take out the '*' and just put 'ngFor', I get an error 'Identifier 'recipe' is not defined.' 'recipes' is a class member variable in my TS file.

This is my html code:

<a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
            <div class="pull-left">
                <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
                <p class="list-group-item-text">{{ recipe.description }}</p>
            </div>
</a>

This is what I have in my TS file:

export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe(
      'A Test Recipe',
      'this is simply a test',
      'https://delightfuladventures.com/wp-content/uploads/2019/10/vegan-stuffed-sweet-potatoes-recipe.jpg'
    ),
    new Recipe(
      'A Test Recipe 2',
      'this is simply a test',
      'https://delightfuladventures.com/wp-content/uploads/2019/10/vegan-stuffed-sweet-potatoes-recipe.jpg'
    ),
  ];

  constructor() {}

  ngOnInit(): void {}
}