Angular 中的模板错误

Question

我正在尝试创建一个元素列表。这是我的 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>

Answer 1

问题是你的 item-detail 组件的选择器被定义为 'app-item-detail'，这意味着 Angular 正在你的 [=22] 中寻找 <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>

Angular 中的模板错误

Template error in Angular

firebase

typescript

firebase-realtime-database

angularfire2

angular5