Angular7组件绑定异常：点击RecipeItem后selectedRecipe始终为undefined

嘿，我一眼就看到问题出在哪了——你的组件自定义事件绑定名称写错了，这直接导致点击事件根本没被正确传递，所以selectedRecipe一直是undefined。下面给你一步步解决：

核心问题 #

在RecipeItemComponent里，你定义的自定义输出事件是clicked：

@Output() clicked = new EventEmitter<void>();

但在RecipeListComponent的模板中，你却用了原生DOM事件的名称onclick来监听：

<app-recipe-item *ngFor="let recipeEl of recipes" [recipe]="recipeEl" (onclick)="onRecipeSelect(recipeEl)"></app-recipe-item>

Angular对组件的自定义事件是严格匹配名称的，(onclick)只会触发原生的点击事件，和你组件里的clicked事件完全不搭边，所以onRecipeSelect方法根本没被调用，RecipeBook自然收不到任何值。

修复步骤 #

1. 修正事件绑定名称 #

把RecipeListComponent模板里的(onclick)改成(clicked)，和子组件的输出事件名称对应：

<app-recipe-item *ngFor="let recipeEl of recipes" [recipe]="recipeEl" (clicked)="onRecipeSelect(recipeEl)"></app-recipe-item>

2. （可选优化）让子组件直接传递选中的Recipe对象 #

原来的逻辑是父组件自己取循环里的recipeEl，其实可以让子组件直接把当前的recipe对象传过来，这样代码更健壮（比如后续循环逻辑变化时不会出错）：

• 修改RecipeItemComponent.ts，把事件发射器改成传递Recipe类型：

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
import { Recipe } from "../../recipe.model";

@Component({
 selector: "app-recipe-item",
 templateUrl: "./recipe-item.component.html",
 styleUrls: ["./recipe-item.component.css"]
})
export class RecipeItemComponent implements OnInit {
 @Input() recipe: Recipe;
 // 改为接收Recipe类型的EventEmitter
 @Output() clicked = new EventEmitter<Recipe>();
 
 constructor() {}
 ngOnInit() {}
 
 onClick() {
 // 直接emit当前的recipe对象
 this.clicked.emit(this.recipe);
 }
}

• 然后修改RecipeListComponent的模板，用$event接收子组件传递的值：

<app-recipe-item *ngFor="let recipeEl of recipes" [recipe]="recipeEl" (clicked)="onRecipeSelect($event)"></app-recipe-item>

修复后的流程验证 #

点击RecipeItem → 触发子组件的onClick方法，emit当前的recipe对象 → RecipeList监听到clicked事件，接收值并转发给RecipeBook → RecipeBook把selectedRecipe赋值为传递过来的对象 → *ngIf="selectedRecipe"条件满足，成功显示RecipeDetail组件，替代原来的提示文本。

内容的提问来源于stack exchange，提问作者venkat1995