Type 'void' is not assignable to type 'Recipe[]'. error in this line of code this: recipes = this.recipeService.getRecipes();

Question

Component code:

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

Service:

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

You should return this.recipes.slice() from getRecipes() method: `return this.recipes.slice();` — GCSDC, Mar 14 '19 at 07:02
You forgot to add a `return` statement in your `getRecipes` method, so it's currently not returning anything, hence the error. — Ian Kemp, Mar 14 '19 at 07:50

score 0 · Answer 1 · answered Mar 14 '19 at 07:04

0

You need to return the recipes from the getRecipes function

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

answered Mar 14 '19 at 07:04

Roman Šimík

830
10
24

Gianni Calmettes · Answer 2 · 2019-03-14T11:32:25.560

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

In your example, your service function does not return anything while you are expecting a collection back (this.items).

So you have to use the keyword return to achieve this.

Furthermore, you are using the slice to return a copy of your local collection, which is a good idea but for the sake of readability and potential performance, I prefer spread operator.

See this discussion for the performance reasons : discussion

score 0 · Answer 3 · answered Nov 26 '20 at 00:07

0

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

Correct Code getRecipes() {

         return this.recipes.slice();
     }

answered Nov 26 '20 at 00:07

user164934

1

Type 'void' is not assignable to type 'Recipe[]'. error in this line of code this: recipes = this.recipeService.getRecipes();

3 Answers3