在我的Angular 9应用程序中，我想将一些数据从父组件传递到子组件。父级通过可观察对象加载该数据。以下是父项的外观...
<div>
<h3 align="center">Hot Items</h3>
<app-items [items]="items" ></app-items>
</div>
然后在ts文件中，我有这个
export class HotComponent implements OnInit {
items: Item[] = [];
constructor(
private apiService: ApiService
) { }
ngOnInit(): void {
this.apiService.getHotItems().subscribe((result: ResultSet) => {
this.items = result.hot_items;
});
}
但是我注意到，当可观察对象加载数据时，它不会在子组件中显示。我想可能是我将其错误地传递给了孩子吗？以下是子组件的ts文件...
export class ItemsComponent implements OnInit {
dataSource: MatTableDataSource<Item>;
displayedColumns: string[] = ['title', 'notes'];
@Input('items') items: Item[] = [];
constructor() { }
ngOnInit(): void {
this.dataSource = new MatTableDataSource(this.items);
}
子组件模板具有以下内容
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="title">
...
当父组件加载数据时，如何重新加载子组件？
一种方法是更换
ngOnInit(): void {
this.dataSource = new MatTableDataSource(this.items);
}
与
ngOnChanges(changes): void {
this.dataSource = new MatTableDataSource(this.items);
}
正如@MikeOne在他的评论中所建议的
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句