时间戳

首页 > 解决方案 > 在Angular中使用@input将数据从父级传递给子级时出现“类型上不存在属性”错误

angular - 在Angular中使用@input将数据从父级传递给子级时出现“类型上不存在属性”错误

问题描述

**Parent component ts**
import { Component, OnInit } from '@angular/core';
import { Recipe } from './recipe.model';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
 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')
  ];

**parent component html**
<div class="row">
    <div class="col-sm-12">
        <app-recipe-item *ngFor="let recipeEl of Recipes" 
[RecipesList]="recipeEl"></app-recipe-item>
    </div>
</div>

**child-component ts **
import { Component, OnInit, Input } 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() RecipesList: Recipe;
  constructor() { }

  ngOnInit(): void {
  }

}

**child-component -html**
<div class="media border p-3 bg-info rounded">
    <div class="media-body">
        <h5 class="mt-0 mb-1">{{ recipeEl.name }}</h5>
        {{ recipeEl.description }}
    </div>
    <img src="{{ recipeEl.imagePath }}" class="ml-3 img-responsiv rounded" alt="..." style="max-height: 80px;" />
</div>

当我尝试使用 @input 装饰器将数据从父组件传递到子组件时，出现错误

错误 TS2339：“RecipeItemComponent”类型上不存在属性“recipeEl”。

我该如何解决这个问题？

标签： angular

解决方案

错误 TS2339：“RecipeItemComponent”类型上不存在属性“recipeEl”好吧，它不存在。子组件上的输入和属性被命名为RecipesList：

export class RecipeItemComponent implements OnInit {
  @Input() RecipesList: Recipe;

顺便说一句，这是一个坏名字，因为它暗示了一个列表，而不是单个项目。最好将输入重命名为，简单地，recipe并坚持下去：

<app-recipe-item *ngFor="let recipeEl of Recipes" [recipe]="recipeEl"></app-recipe-item>

export class RecipeItemComponent implements OnInit {
    @Input() recipe: Recipe;

    <div class="media-body">
        <h5 class="mt-0 mb-1">{{ recipe.name }}</h5>
        {{ recipe.description }}
    </div>

推荐阅读