Question

组件代码：

import { Component, OnInit } from '@angular/core';
import { RecipeService } from '../recipe.service';
import { Recipe } from '../recipe.model';

@Component({
    selector: 'app-recipe-list',
    templateUrl: './recipe-list.component.html'
})

export class RecipeListComponent implements OnInit {
    recipes: Recipe[];
    constructor(private recipeService: RecipeService) {
    }

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

服务：

import { Recipe } from './recipe.model';
import { EventEmitter } from '@angular/core';
export class RecipeService { 
    recipeSelect = new EventEmitter();

    private recipes: Recipe[] = [
        new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
        new Recipe('Another Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')];
    getRecipes() {
        this.recipes.slice();
    }
}

Answer 1

您需要通过getRecipes函数返回配方

getRecipes(): Recipe[] {
    return this.recipes.slice();
}

Answer 2

getRecipes(): Recipe[] {
    return [...this.recipes];
}

在您的示例中，您的服务函数在期望回收之前（this.items）不返回任何内容。

因此，您必须使用关键字return来实现这一目标。

此外，您正在使用slice返回本地收藏集的副本，这是个好主意，但出于可读性和潜在性能的考虑，我更喜欢spread operator。

出于性能原因，请参见此讨论：discussion

Answer 3

Your Code
getRecipes() {
         this.recipes.slice();
     }

正确的代码 getRecipes（）{

         return this.recipes.slice();
     }

类型“ void”不可分配给类型“ Recipe []”。这行代码中的错误为：配方= this.recipeService.getRecipes（）;

3 个答案: