Ошибка шаблона в Angular - PullRequest
Новая
       16

Ошибка шаблона в Angular

0 голосов
/ 21 мая 2018

Я пытаюсь создать список элементов.Вот мой 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>

1 Ответ

0 голосов
/ 21 мая 2018

Проблема в том, что селектор компонента item-detail определен как 'app-item-detail', что означает, что Angular ищет теги <app-item-detail> в вашем HTML.

Однако вы использовали <item-detail [item]='item'></item-detail> и угловой не знает, что такое 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>
...