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();
        }

}
1
JohnDev 19 marzec 2020, 21:30

2 odpowiedzi

Najlepsza odpowiedź

Może iteruj swoją tablicę za pomocą * ngFor = "niech przepis na przepisy " w ten sposób:

<div *ngFor="let recipe of recipes">
   <a href="#"class="list-group-item clearfix">
    <div class="pull-left">
       <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
        <p class="list-group-item-text">{{ recipe.description }}</p>
    </div>
   <span class="pull-right">
    <img 
    [src]="recipe.imagePath" 
    alt="{{ recipe.name }}"
    class="img-responsive"
    style="max-height: 50px">
   </span>
   </a>
</div
1
Tzimpo 19 marzec 2020, 18:39

Problem polega na tym, że Recipe jest tablicą i musisz ją iterować, więc:

<div *ngFor="let element of recipe" class="pull-left">
        <h4 class="list-group-item-heading">{{ element.name }}</h4>
        <p class="list-group-item-text">{{ element.description }}</p>
 </div>
1
FedMice 19 marzec 2020, 18:42