Nie można wyświetlić pozycji listy

Jestem nowy w Angular i tworzę prostą aplikację z przepisami na pojedynczą stronę. Próbuję wyświetlić listę receptur, z których użytkownik może wybrać, ale z jakiegoś powodu wygrała; t odczytać właściwość obiektu receptury w tablicy receptur. Podczas ponownej kompilacji pojawia się komunikat o błędzie, który mówi, że „Nazwa właściwości” nie istnieje w typie „Recipe []” ”.

Oto plik recepty.html:

   <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">

    <h2>Recipes</h2>
<div *ngFor="let recipeEl of recipe">
    <a 
    href="#"
    class="list-group-item clearfix">
    <div class="pull-left">
        <h4 class="list-group-item-heading">{{ recipeEl.name }}</h4>
        <p class="list-group-item-text">{{ recipeEl.description }}</p>
    </div>
    <span class="pull-right">
        <img 
        [src]="recipeEl.imagePath" 
        alt="{{ recipeEl.name }}"
        class="img-responsive"
        style="max-height: 50px">
    </span>
</a>
</div>

Oto plik recepty.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from './recipes.model';
import { Recipeservice } from './recipes.service';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
})
export class RecipesComponent implements OnInit {
  @Input() recipe: Recipe[];

  constructor(private recipeService: Recipeservice) {}

  ngOnInit() {
    this.recipe = this.recipeService.getRecipes();
  }

}

Oto plik recepty.model.ts:

Import {Ingredient} z "../shared/ingredient.model";

export class Recipe { 
  public name: string;
  public description: string;
  public imagePath: string;
  public ingredients: Ingredient[];

  constructor(name: string, desc: string, imagePath: string, ingredients: Ingredient[]) {
    this.name = name;
    this.description = desc;
    this.imagePath = imagePath;
    this.ingredients = ingredients;
  }
}

Oto plik recepty.service.ts:

import { Recipe } from './recipes.model';
import { Ingredient } from '../shared/ingredient.model';
import { Injectable } from '@angular/core';

@Injectable()
export class Recipeservice {

    private recipes: Recipe[] = [
        new Recipe('Spaghetti Carbonara', 'Authentic Italian Carbonara', 'https://cdn.pixabay.com/photo/2015/04/08/13/13/pasta-712664_960_720.jpg', [
            new Ingredient('Spaghetti', 500),
            new Ingredient('Lardons', 20),
            new Ingredient('egg', 4),
            new Ingredient('parmesan', 100),
            new Ingredient('Garlic', 1),
            new Ingredient('Olive Oil', 50)
        ])
    ]

        getRecipes() {
            return this.recipes.slice();
        }

}