将数据组件绑定到Angular 2 App中的表格显示组件-Java 学习之路

我在我的Angular 2应用程序中进行了分页，使用了方便的ng2-pagination模块 . 现在我希望能够在组件之间传递信息 . 我有几个具有唯一api调用的组件，它们都将其内容加载到相同的表格显示中 . 因此，表格显示是具有表格视图的组件 .

我已经使用表格视图将组件与数据绑定到组件，使用方括号表示法来绑定“记录”，如下所示：

<tabular-display [records]="records"></tabular-display>

然后，在'tabular-display'组件中，我使用@Input（）装饰器来访问那些记录数据，如下所示：

@Input() records = [];

在表格显示组合视图中，我迭代了那些记录数组，然后将它们传递给分页管道，如下所示：

<tr *ngFor="let record of records.data | paginate: { id: 'clients', itemsPerPage: 12, currentPage: page, totalItems: records.count }">

现在，在'表格显示'视图中的这个区域下方，分页管道使用'分页控件'来处理从上面的* ngFor迭代生成正确数量的页面 . 看起来像这样：

<pagination-controls class="paginator" (pageChange)="pageChange($event)" id="clients"
            maxSize="15"
            directionLinks="true"
            autoHide="true">
    </pagination-controls>

我的上一个任务是让你在上面看到的这个“pageChange（）”事件将该事件传递给数据组件 - 这样就可以调用正确的数据 . 怎么做到最好？我已经尝试使用@Output（）和EventEmitter（）：

@Output() sendChange = new EventEmitter();

pageChange($event) {
    this.sendChange.emit(this.page);
    console.log($event);
}

我将正确的页码打印到控制台 . 但是，数据组件如何接收（即有权访问）发出的数据？它如何“接收”发出的数据？

顺便说一句，这是我需要将页面更改事件传递给的函数 . 数据组件中的此函数如何获取从表格显示组件发出的事件？

getPageByCategory(page) {
    this.clientsService.getByCategory('consulting', page, this.pagesize)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.page = page;
            console.log(page);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

1 回答

0
在pageChange上，更改/获取记录的内容及其对应的页面 . 更改检测将自动更新表格显示组件 .
- 用户点击第二页，发出该事件 .
- 从您的http请求或您的来源获取第2页记录 .
- 将上述值设置为记录，更改检测将处理其余部分
回复于 2024-04-25T19:32:53+08:00

将数据组件绑定到Angular 2 App中的表格显示组件

1 回答

相关问题