Question

我试图将数据从我的recipe-details.component.ts传递到recipe.services.ts，但是遇到了问题。它说

类型“食谱[]”上不存在属性“成分”

下面是我尝试过的代码；即使我尝试console.log(this.displayed.ingredients)，也会收到错误消息

recipe-detail.component.html

<div class="row">
    <div class="col-xs-12">
        <img src="{{displayed.imageurl}}" alt="{{displayed.name}}" 
             class="img-responsive" style="max-height:300px">
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <h1>{{displayed.name}} </h1>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="btn-group" appDropdown>
            <button class="btn btn-primary dropdown-toggle" 
                    type="button">Manage Recipe <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#" (click)="onaddtoshopping()" 
                       style="cursor:pointer;">Shopping List</a></li>
                <li><a href="#">Edit Recipe</a></li>
                <li><a href="#">Delete Recipe</a></li>
            </ul>
        </div>
     </div>
</div>

<div class="row">
    <div class="col-xs-12">
        {{displayed.description}}
    </div>
</div>

{{i.name}}-{{i.amount}}

recipe-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { Recipeservice } from '../recipe.service';
import { Recipe } from 'src/app/shared/recipe.modal';

@Component({
selector: 'app-recipe-details',
templateUrl: './recipe-details.component.html',
styleUrls: ['./recipe-details.component.css']
})
export class RecipeDetailsComponent implements OnInit {
displayed:Recipe[]=[]
constructor(private reservice:Recipeservice) {
this.reservice.passed.subscribe((i)=>{
  this.displayed=i
  // console.log(this.displayed)

    })
 }


ngOnInit() {


 }
onaddtoshopping(){
// this.reservice.onshoppingadd(this.displayed.ingredients)
console.log(this.displayed.ingredients)
}

}

recipe.service.ts

import { Recipe, } from '../shared/recipe.modal';
import {EventEmitter, Injectable } from '@angular/core';
import { Ingredient } from '../shared/ingredients.modal';
// import { Shoppingrecipe } from '../shopping/shopping.service';
// @Injectable()
export class Recipeservice{
recipes:Recipe[]=[
new Recipe('Tasty Schnitzel','A super tasty Tasty Schnitzel-just 
awesome', 

[
  new Ingredient('Meat',12),
  new Ingredient('French Fries',5)
]),
new Recipe('Big fat burger','What else you need to say ?',
[
new Ingredient('Buns',3),
  new Ingredient('Meat',7)
])
]
// constructor(private slservice:Shoppingrecipe){}
passed=new EventEmitter<Recipe>()
out=new EventEmitter<string>()
onshoppingadd(ingredient){
// this.slservice.addingre(ingredient)
}
}

recipe.modal.ts

export class Recipe{
name;
description;
imageurl;
ingredients;
constructor(name,desc,path,ingre){
    this.name=name;
    this.description=desc;
    this.imageurl=path;
    this.ingredients=ingre
}

}

ingredients.modal.ts

export class Ingredient{
name;
amount;

constructor(name,amount){
    this.name=name;
    this.amount=amount;
}

}

Answer 1

您正在创建一个数组，因此您应该请求具有索引的成分

displayed:Recipe[]=[] // this is an array of recipes

您在做什么。

console.log(this.displayed.ingredients)

您应如何要求。您需要通过索引伴侣来查找成分。

console.log(this.displayed[0].ingredients)

Answer 2

您有一些错误。

在recipe.modal.ts中使用模型而不是模式

recipe.service.ts：// @ Injectable（）取消注释此行

在recipe.service.ts中，您没有提供imageUrl

new Recipe(
    'Tasty Schnitzel',
    'A super tasty Tasty Schnitzel-just awesome',
    //here
    'https://www.daringgourmet.com/wp-content/uploads/2014/03/Schnitzel-7_edited.jpg',
    [
        new Ingredient('Meat',12),
        new Ingredient('French Fries',5)
    ]),

尝试将数据作为参数传递给服务文件

2 个答案: