如何在Angular 7中将无限滚动与mat-table和service结合使用？

在Angular 7中，可以通过结合mat-table和service来实现无限滚动。下面是一个完整的解决方案：

首先，确保已经安装了Angular Material和Cdk。可以使用以下命令进行安装：

ng add @angular/material

在组件中引入所需的模块和服务：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MyDataService } from './my-data.service';

创建一个数据源和分页器：

dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

在ngOnInit方法中初始化数据源和分页器，并调用服务获取初始数据：

ngOnInit() {
  this.dataSource = new MatTableDataSource<any>();
  this.dataSource.paginator = this.paginator;
  this.getData();
}

创建一个getData方法，用于从服务中获取数据：

getData() {
  this.myDataService.getData().subscribe((data: any[]) => {
    this.dataSource.data = data;
  });
}

在模板中使用mat-table来展示数据：

<table mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef> Column 1 </th>
    <td mat-cell *matCellDef="let element"> {{element.column1}} </td>
  </ng-container>

  <!-- 其他列定义 -->

  <!-- 列绑定 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>

创建一个数据服务（MyDataService），用于获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyDataService {
  constructor(private http: HttpClient) { }

  getData() {
    // 发起HTTP请求获取数据
    return this.http.get('http://example.com/api/data');
  }
}

这样，当组件初始化时，会调用getData方法从服务中获取数据，并将数据绑定到mat-table中展示。同时，使用mat-paginator来实现分页功能。

请注意，以上代码仅为示例，实际应用中可能需要根据具体情况进行调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。你可以在腾讯云官网上找到更多关于这些产品的详细介绍和文档。

参考链接：