每次模态打开时都用新数据重新加载角度模态

Question

我目前正在开发一个 Angular Web 项目，该项目是加载 Modal 以更新报告的主要组件类。这个模态报告有标签，其中一个标签是我负责的交易标签。我遇到的问题是，当我关闭更新报告模式并再次打开它时，事务选项卡仍然显示它加载到已初始化组件上的列表。我希望事务选项卡在每次打开更新模式时重新加载数据。这是我加载数据的地方：

enter ngOnInit() {
    this.getTransactions();
    this.getAllTransmodes();
}code here

这是获取数据的方法：

getTransactions(): void {
    this.onDeselect();
    this.response = this.reportTransactionsTabService.getTransactions(this.selectedReport.xmlGuid)
        .subscribe(
            items => {
                this.transactions = items;
                this.filteredTransactions = this.transactions;
                this.totalTransactions = this.filteredTransactions.length
                this.filterValue = "";
                this.currentSortField = null;
            },
            error => this.errorMessage = <any>error);
}

Answer 1

我找到了问题的解决方案。我需要做的就是继承 OnChanges（Angular 的生命周期钩子之一）：

export class ReportTransactionsTabComponent implements OnInit, **OnChanges**

然后调用ngOnChanges方法中加载数据的函数：

ngOnChanges() {
    this.getTransactions();
    this.getAllTransmodes();
}

如果报表事务选项卡发生变化，它基本上会继续调用这些方法

Answer 2

ngOnInit() 是组件生命周期挂钩，它特定于您的 PageComponent，并在您的页面加载时被调用。由于您使用选项卡来显示交易数据，因此当您单击选项卡时，它不会再次重新加载您的页面。所以在这种情况下不会调用 ngOnInit() 方法。

您应该在单击选项卡时调用 refresh/loadData 方法，如下所示： <div (click)="loadData()">TransactionTab</div>

同样在你的组件中定义方法

loadData() { //Call the method for loading your data this.getTransactions(); this.getAllTransmodes(); }