angular - 角垫表示意图问题

Question

我在创建的 mat-table 示意图中显示我的后端数据时遇到问题。我能够使用我的服务提取数据并将其传递connect()给从我的数据库中加载带有字段的数据，我的主要问题是表格在底部显示了被提取的行数，但数据没有显示在它自己的表，当我更改每页的项目数时，它将按行显示数据。

我将粘贴我的代码和我得到的屏幕截图。

    branch-table.component.html

    <div class="mat-elevation-z8 full-width-table">
    <mat-table matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.id}}</mat-cell>
    </ng-container>

    <!-- Branch Code Column -->
    <ng-container matColumnDef="branchCode">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Branch Code</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.branchCode}}</mat-cell>
    </ng-container>

    <!-- Host Column -->
    <ng-container matColumnDef="host">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Host</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.host}}</mat-cell>
    </ng-container>

    <!-- ftpPort Column -->
    <ng-container matColumnDef="ftpPort">
      <mat-header-cell *matHeaderCellDef mat-sort-header>FTP Port</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.ftpPort}}</mat-cell>
    </ng-container>

    <!-- Username Column -->
    <ng-container matColumnDef="username">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Username</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.username}}</mat-cell>
    </ng-container>

    <!-- Password Column -->
    <ng-container matColumnDef="password">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Password</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.password}}</mat-cell>
    </ng-container>

    <!-- Folder Path In Column -->
    <ng-container matColumnDef="folderPathIn">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Folder Path In</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.folderPathIn}}</mat-cell>
    </ng-container>

    <!-- Folder Path Out Column -->
    <ng-container matColumnDef="folderPathOut">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Folder Path Out</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.folderPathOut}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator
      [length]="dataSource?.data.length"
      [pageIndex]="0"
      [pageSize]="2"
      [pageSizeOptions]="[2, 50, 100, 250]">
    </mat-paginator>
    </div>

    branch-table-datasource.ts

    import { DataSource } from '@angular/cdk/collections';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { map } from 'rxjs/operators';
    import { Observable, of as observableOf, merge } from 'rxjs';
    import { Branch } from '../shared/branch.model';
    import { DataStorageService } from '../shared/data-storage.service';
    
    // TODO: Replace this with your own data model type
    
    /**
     * Data source for the BranchTable view. This class should
     * encapsulate all logic for fetching and manipulating the displayed data
     * (including sorting, pagination, and filtering).
     */
    export class BranchTableDataSource extends DataSource<Branch> {
      //data: BranchTableItem[] = EXAMPLE_DATA;
      data : Branch[] = []; //= EXAMPLE_DATA;
      paginator: MatPaginator;
      sort: MatSort;
    
      constructor(private dataService: DataStorageService) {
        super();
      }
    
    
      /**
       * Connect this data source to the table. The table will only update when
       * the returned stream emits new items.
       * @returns A stream of the items to be rendered.
       */
      connect(): Observable<Branch[]> {
        // Combine everything that affects the rendered data into one update
        // stream for the data-table to consume.
        this.dataService.getBranches().subscribe(branches => {
          //console.log(branches);
          this.data = [...branches];
          //this.data = branches;
          console.log(this.data);
          this.paginator.length = this.data.length;
        });
        const dataMutations = [
          observableOf(this.data),
          this.paginator.page,
          this.sort.sortChange
        ];
    
        // return merge(...dataMutations)
        // .pipe(
        //   map(() => this.getPagedData(this.getSortedData([...this.data])))
        // );
        return merge(...dataMutations).pipe(map(() => {
          return this.getPagedData(this.getSortedData([...this.data]));
        }));
      }
    
      /**
       *  Called when the table is being destroyed. Use this function, to clean up
       * any open connections or free any held resources that were set up during connect.
       */
      disconnect() {}
    
      /**
       * Paginate the data (client-side). If you're using server-side pagination,
       * this would be replaced by requesting the appropriate data from the server.
       */
      private getPagedData(data: Branch[]) {
        const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
        return data.splice(startIndex, this.paginator.pageSize);
      }
    
      /**
       * Sort the data (client-side). If you're using server-side sorting,
       * this would be replaced by requesting the appropriate data from the server.
       */
      private getSortedData(data: Branch[]) {
        if (!this.sort.active || this.sort.direction === '') {
          return data;
        }
    
        return data.sort((a, b) => {
          const isAsc = this.sort.direction === 'asc';
          switch (this.sort.active) {
            case 'id': return compare(+a.id, +b.id, isAsc);
            case 'branchCode': return compare(a.branchCode, b.branchCode, isAsc);
            case 'host': return compare(+a.host, +b.host, isAsc);
            case 'ftpPort': return compare(+a.ftpPort, +b.ftpPort, isAsc);
            case 'username': return compare(+a.username, +b.username, isAsc);
            case 'password': return compare(+a.password, +b.password, isAsc);
            case 'folderPathIn': return compare(+a.folderPathIn, +b.folderPathIn, isAsc);
            case 'folderPathOut': return compare(+a.folderPathOut, +b.folderPathOut, isAsc);
            default: return 0;
          }
        });
      }
    }
    
    /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
    function compare(a: string | number, b: string | number, isAsc: boolean) {
      return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
    }

    branch-table.component.ts

    import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { MatTable } from '@angular/material/table';
    import { Branch } from '../shared/branch.model';[![enter image description here][1]][1]
    import { DataStorageService } from '../shared/data-storage.service';
    import { BranchTableDataSource } from './branch-table-datasource';
    
    @Component({
      selector: 'app-branch-table',
      templateUrl: './branch-table.component.html',
      styleUrls: ['./branch-table.component.css']
    })
    export class BranchTableComponent implements AfterViewInit, OnInit {
      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
      @ViewChild(MatTable) table: MatTable<Branch>;
      dataSource: BranchTableDataSource;
    
      /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
      displayedColumns = ['id','branchCode','host','ftpPort','username','password','folderPathIn','folderPathOut'];
    
      constructor(private dataService: DataStorageService){}
    
      ngOnInit() {
        this.dataSource = new BranchTableDataSource(this.dataService);
      }
    
      ngAfterViewInit() {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
        this.table.dataSource = this.dataSource;
      }
    }

从下面的屏幕截图中，您可以看到它显示 1 - 2 of 7，这说明有 7 行，而页面显示 2 或假设显示 2 行，第二个屏幕截图我将页面项目更改为显示 50 和然后它显示了行数据

[

标签： angularangular-materialmat-table