Что я делаю неправильно?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `<div *ngFor="talk of talks">
{{talk.title}} by {{talk.speaker}}
<p>{{talk.description}}
</div>`
})
class ConfTalks {
talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
{title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
selector: 'my-app',
directives: [ConfTalks],
template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])
Ошибка
EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">
Я пропустил let
перед talk
:
<div *ngFor="let talk of talks">
Обратите внимание, что от бета-версии .17 использование #...
для объявления локальных переменных внутри структурных директив, таких как NgFor, устарело. Вместо этого используйте let
.
<div *ngFor="#talk of talks">
теперь становится <div *ngFor="let talk of talks">
Оригинальный ответ:
Я пропустил #
перед talk
:
<div *ngFor="#talk of talks">
Так легко забыть, что #
. Я хочу, чтобы сообщение об ошибке исключения Angular вместо этого произнесло: you forgot that # again
.
Другая опечатка, приводящая к ошибке OP, может быть использована in
:
<div *ngFor="let talk in talks">
вместо того, чтобы of
:
<div *ngFor="let talk of talks">
Это выражение используется в бета-версии Angular2.....
Здесь и далее используйте let вместо #
ключевое слово let используется для объявления локальной переменной
В моем случае это была маленькая буква f
.
Я разделяю этот ответ только потому, что это первый результат в google
обязательно напишите *ngFor
Для меня, чтобы сократить длинную историю, я был непреднамеренно понижен до angular -beta-16.
Синтаксис let... ТОЛЬКО действует в версии 2.0.0-beta.17 +
Если вы попробуете синтаксис let на чем-нибудь ниже этой версии. Вы будете генерировать эту ошибку.
Либо обновить до angular -beta-17, либо использовать синтаксиС#item в элементах.
В моем случае я допустил ошибку при копировании *ng-for=
из документов.
https://angular.io/guide/user-input
Исправьте меня, если я ошибаюсь. Но кажется, что *ng-for=
было изменено на *ngFor=
Я забыл аннотировать свой компонент с помощью " @Input " (Doh!)
book-list.component.html (Оскорбляющий код):
<app-book-item
*ngFor="let book of book$ | async"
[book]="book"> <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>
Исправленная версия book-item.component.ts:
import { Component, OnInit, Input } from '@angular/core';
import { Book } from '../model/book';
import { BookService } from '../services/book.service';
@Component({
selector: 'app-book-item',
templateUrl: './book-item.component.html',
styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {
@Input()
public book: Book;
constructor(private bookService: BookService) { }
ngOnInit() {}
}
#
) используется для объявления локальной переменной шаблона