在Angular 9中，如何在父组件通过Observable加载了数据后重载子组件?

Question

在我的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">
...

当父组件加载数据时，如何让子组件重新加载?

Answer 1

一种方法是替换

ngOnInit(): void {
this.dataSource = new MatTableDataSource(this.items);
}

ngOnChanges(changes): void {
this.dataSource = new MatTableDataSource(this.items);
}

正如@MikeOne在他的评论中建议的

Answer 2

这里你做的是正确的但有一件事是，变量引用没有改变所以@Input中的值

尝试用Observable实现，就像下面的

在视图:

<app-items [items]="items$ | async" ></app-items>

在模板:

...
ngOnInit() {
this.items$ = this.apiService.getHotItems();
}
...

更多信息请参考原文。

编码快乐. .:)