Question

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

<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 加载数据时，它没有显示在子组件中。我想也许我把它错误地传递给了孩子？下面是子组件的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

一种方法是替换

onDestroy

与

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

 ...

有关详细信息，请参阅 original answer。

快乐编码.. :)

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

2 个答案: