我做错了什么?
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">
我错过了就让在前面说话:
<div *ngFor="let talk of talks">
注意到。使用#…不建议在NgFor等结构性指令中声明局部变量。用let代替。
<div *ngFor="#talk of talks">现在变成<div *ngFor="let talk of talks">
最初的回答:
我错过了#在谈话前:
<div *ngFor="#talk of talks">
我们很容易忘记#。我希望Angular的异常错误消息会说:you forget that # again。
我忘记用“@Input”来注释我的组件(哎呀!)
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() {}
}
