在 Angular 9 中，如何让 child 组件在 parent 通过 Observable 加载数据后重新加载？

Question

在我的 Angular 9 应用程序中，我想将一些数据从 parent 组件传递到 child 组件。 parent 通过 observable 加载数据。下面是 parent 项目的样子...

<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;
    });
  }

但是我注意到当 observable 加载数据时，它没有显示在 child 组件中。我想也许我把它传递给 child 不正确？下面是 child 组件的 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);
  }

并且 child 组件模板具有以下内容

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="title">
    ...

如何在 parent 组件加载数据时让 child 组件重新加载？

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();
 }

 ...

更多信息请参考。

快乐编码..:)

在 Angular 9 中，如何让 child 组件在 parent 通过 Observable 加载数据后重新加载？

In Angular 9, how do I get a child component to reload after the parent has loaded data through an Observable?

angular

observable

parent-child

angular9