Question

我目前正在研究一个有角度的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

ngOnInit（）是组件的生命周期钩子，特定于您的PageComponent，并在页面加载时被调用。当您使用标签来显示交易数据时，因此当您单击标签时，它不会再次重新加载页面。因此，在这种情况下，不会调用ngOnInit（）方法。

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

还可以在组件中定义方法，例如

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

Answer 2

我找到了解决问题的办法。我需要做的就是从OnChanges（Angular的生命周期挂钩之一）中继承：

export class ReportTransactionsTabComponent implements OnInit, **OnChanges**

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

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

如果报表“事务”选项卡发生更改，它将基本上继续调用这些方法

每当模态打开时，使用新数据重新加载角模态

2 个答案: