Angular中的模板错误

Posted 2023-03-13

【中文标题】Angular中的模板错误

【英文标题】：Template error in Angular

【发布时间】：2018-10-31 02:47:38

【问题描述】：

我正在尝试创建一个元素列表。这是我的 html 模板：

<div *ngFor="let item of items | async">
  <item-detail [item]='item'></item-detail>
</div>
<button (click)='deleteItems()'>Delete Entire List</button>

所以，我只是想遍历列表。不幸的是，我得到了这个：

Error: Template parse errors:
Can't bind to 'item' since it isn't a known property of 'item-detail'.

这是我的item-list.component.ts。

import Component, OnInit from '@angular/core';
import FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase from 'angularfire2/database-deprecated';
import Item from '../shared/item';
import ItemService from '../shared/item.service';

@Component(
  selector: 'app-items-list',
  templateUrl: './items-list.component.html',
  styleUrls: ['./items-list.component.scss']
)

export class ItemsListComponent implements OnInit 
  public items: FirebaseListObservable<Item[]>;
  constructor(private itemSvc: ItemService) 
  
  ngOnInit() 
    this.items = this.itemSvc.getItemsList(limitToLast: 5);
  

我正在关注本教程：https://angularfirebase.com/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/

item-details.component.ts文件

import Component, OnInit from '@angular/core';
import Input from '@angular/core';
import Item from '../shared/item';
import ItemService from '../shared/item.service';

@Component(
  selector: 'app-item-detail',
  templateUrl: './item-detail.component.html',
  styleUrls: ['./item-detail.component.scss']
)
export class ItemDetailComponent 
  @Input() item: Item;

  constructor(private itemSvc: ItemService) 
  

  updateTimeStamp() 
    this.itemSvc.updateItem(this.item.firebaseKey, );
  

  updateActive(value: boolean) 
    this.itemSvc.updateItem(this.item.firebaseKey, );
  

跟进错误：

Can't bind to 'item' since it isn't a known property of 'app-items-list'.

新代码：

<div *ngFor="let item of items | async">
  <app-items-list [item]='item'></app-items-list>
</div>

【问题讨论】：

你能把你的item-detail组件的TS文件贴出来吗？很可能您没有正确定义输入属性

对不起，我什至不知道它们是相关的。

项目详细信息选择器应为selector: 'item-detail'

【参考方案1】：

问题是你的item-detail组件的选择器被定义为'app-item-detail'，这意味着Angular在你的HTML中寻找<app-item-detail>标签。

但是，您使用了<item-detail [item]='item'></item-detail>，而 angular 不知道item-detail 是什么。将其更改为<app-item-detail [item]='item'></app-item-detail>，一切都会好起来的。

---

<div *ngFor="let item of items | async">
  <app-item-detail [item]='item'></app-item-detail>
</div>

【讨论】：

哦哦好的。所以我可以在组件中更改它，还是在模板中更改它？

是的，两者都可以。但是，约定是在组件选择器前加上应用程序的名称（通常默认为app），所以我会保留app-item-detail

确保以下几点：1）ItemDetailComponent 正确导入到您的app.module 2）ItemDetailComponent 的选择器是'app-item-detail'

我有两个文件。 item-details.component.ts 和 item-list.component.ts。现在，他们俩都在使用<app-item-detail [item]='item'></app-item-detail>。它是否正确？如果我将模板设置为 <app-items-list [item]='item'></app-items-list> 它会将错误缩小到：Can't bind to 'item' since it's not a known property of 'app-items-list'