How to fix ERROR TypeError: "_co.loadedRecipe is undefined", ERROR Error: "[object Object]"

Question

我正在学习 ionic/angular 并且正在尝试使用路由的东西，信息通过这样的路径传递

path: ':recipeId',

因为我有一个带有 ID 的项目列表，所以我希望能够单击该项目并转到该列表项目的详细信息页面。

我成功地显示了带有项目列表的页面（可以说它在 /recipes）但是当我点击一个项目进入详细信息页面时（/recipes/id）我出错了：

ERROR TypeError: "_co.loadedRecipe is undefined" View_RecipeDetailPage_0 RecipeDetailPage.html:11 Angular 24 RxJS 5 Angular 11 RecipeDetailPage.html:11:4 View_RecipeDetailPage_0 RecipeDetailPage.html:11 Angular 16 RxJS 5 Angular 11

这指向模块（或组件？angular 的新功能）html 代码

<ion-header>
  <ion-toolbar>
    <ion-title> {{ loadedRecipe.title }} </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-grid>
        <ion-row>
            <ion-col>
                <ion-img [src]="loadedRecipe.imageUrl"></ion-img>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <h1> {{ loadedRecipe.title }}</h1>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-list>
                    <ion-item *ngFor="let ig of loadedRecipe.ingredients">
                        {{ ig }}
                    </ion-item>
                </ion-list>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

这里的 loadedRecipe 似乎是 undefined。

Here's the controller ts code:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipesService } from '../recipes.service';

import { Recipe } from '../recipe.model';

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.page.html',
  styleUrls: ['./recipe-detail.page.scss'],
})
export class RecipeDetailPage implements OnInit {

  loadedRecipe: Recipe;

  constructor(
    private activatedRoute: ActivatedRoute,
    private recipesService: RecipesService
  ) {}

  ngOnInit() {
    console.log(this.activatedRoute.paramMap);
    this.activatedRoute.paramMap.subscribe(paramMap => {
        if (!paramMap.has('recipeId')) {
            // redirect because we don't have id that we need
            return;
        }

        console.log(paramMap);
        const recipeId = paramMap.get('recipeId');
        this.loadedRecipe = this.recipesService.getRecipe(recipeId);
    });
  }

}

app-routing module:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'recipes', pathMatch: 'full' },
  {
    path: 'recipes',
    children: [
    {
      path: '',
      loadChildren: './recipes/recipes.module#RecipesPageModule'
    },
    {
      path: ':recipeId',
      loadChildren: './recipes/recipe-detail/recipe-detail.module#RecipeDetailPageModule'
    }
    ],
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

list controller recipes.page.ts:

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

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.page.html',
  styleUrls: ['./recipes.page.scss'],
})
export class RecipesPage implements OnInit {

  recipes: Recipe[];


  constructor(private recipesService: RecipesService) { }

  ngOnInit() {
    this.recipes = this.recipesService.getAllRecipes();
  }

}

我想我在激活的路线上做错了什么，但我有点不知所措。在网络上调试也是新手，所以任何指针都会很棒。

Answer 1

Nicholas K 让您朝着正确的方向前进。我想一个例子也会有所帮助。

app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

 const routes: Routes = [
   { path: '', redirectTo: 'recipes', pathMatch: 'full' },
   { path: 'recipes', loadChildren: './recipes/recipes.module#RecipesPageModule' },
   { path: 'recipe-detail/:id', loadChildren: './recipe-detail/recipe-detail.module#RecipeDetailPageModule' },
 ];

 @NgModule({
   imports: [
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
   ],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

在 recipe-detail.page.ts 中，正如 Nicholas K 提到的，您可以像这样访问激活路由中的参数

 ngOnInit() {
   this.id = this.route.snapshot.paramMap.get("id");
   if (this.id != null) {
     console.log('id: ' + this.id);
   }
 }

而且你可以像这样从菜谱页面导航到详情页面（你也可以使用 routerLink 而不是点击事件来导航）

recipes.page.html

 <ion-content>
   <ion-list>
     <ion-item *ngFor="let recipe of recipes" (click)="routeToRecipeDetail(recipe.id)">
       {{recipe.name}}
     </ion-item>
   </ion-list>
 </ion-content>

食谱。page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';

 @Component({
   selector: 'app-recipes',
   templateUrl: './recipes.page.html',
   styleUrls: ['./recipes.page.scss'],
 })
 export class RecipesPage implements OnInit {

   recipes = [
     { id: 1, name: 'pizza' },
     { id: 2, name: 'hamburgers' },
     { id: 3, name: 'salad' }
   ]

   constructor(private router: Router) { }

   ngOnInit() {
   }

   routeToRecipeDetail(id: number) {
     this.router.navigateByUrl('/recipe-detail/' + id);
   }

 }

我创建了一个 github 存储库 here 如果你想看一看。希望这有帮助

How to fix ERROR TypeError: "_co.loadedRecipe is undefined", ERROR Error: "[object Object]"

How to fix ERROR TypeError: "_co.loadedRecipe is undefined", ERROR Error: "[object Object]"

typescript

angular

ionic4

angular8