我正在开发一个Angular 6应用程序 . 我有一个组件 BelloComponent ，它呈现 @Input items 上传递的列表 .
@Component({
selector: 'bello',
template: `
<ul *ngIf="items?.length">
<li *ngFor="let item of items">
???
</li>
</ul>
`
})
export class BelloComponent {
@Input() items: Array<Object>;
}
消费者 AppComponent 使用 BelloComponent . 如何渲染列表从AppComponent传播BelloComponent标签内的模板？
@Component({
selector: 'my-app',
template: `
<bello [items]="cacche_list">
<b>{{ name }}, puzza value: {{ puzza }}</b>
</bello>`
})
export class AppComponent {
cacche_list = [
{ name: 'cacca 1', puzza: 3 },
{ name: 'cacca 2', puzza: 5 },
{ name: 'cacca 3', puzza: 66 },
{ name: 'cacca 4', puzza: 5 },
{ name: 'cacca 5', puzza: 2 },
{ name: 'cacca 6', puzza: 12 },
];
}
stackblitz是这样的：https://stackblitz.com/edit/angular-exbhsv?file=src%2Fapp%2Fapp.component.ts
我想我错过了什么，如何告诉 BelloComponent 如何在ngFor中渲染元素？如何访问从 AppComponent 呈现的单个项目？
1 回答
唯一缺少的是
ngFor中的{{item.name}}Demo