Angular 角垫工作台示意图问题

我在创建的mat表格示意图中显示后端数据时遇到问题。我能够使用我的服务提取数据，并将其传递到

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;
      }
    }

branch-table.component.html
身份证件
{{row.id}}
分支代码
{{row.branchCode}}
主办
{{row.host}}
FTP端口
{{row.ftpPort}
用户名
{{row.username}
密码
{{row.password}}
中的文件夹路径
{{row.folderPathIn}
文件夹路径输出
{{row.folderPathOut}
branch-table-datasource.ts
从'@angular/cdk/collections'导入{DataSource}；
从'@angular/material/paginator'导入{MatPaginator}；
从'@angular/material/sort'导入{MatSort}；
从“rxjs/operators”导入{map}；
从“rxjs”导入{observeable，of as observeof，merge}；
从“../shared/Branch.model”导入{Branch}；
从“../shared/data storage.service”导入{DataStorageService}；
//TODO:将其替换为您自己的数据模型类型
/**
*BranchTable视图的数据源。这个班应该
*封装用于获取和操作显示数据的所有逻辑
*（包括排序、分页和筛选）。
*/
导出类BranchTableDataSource扩展了DataSource{
//数据：BranchTableItem[]=示例_数据；
数据：分支[]=[]；//=示例_数据；
paginator:MatPaginator；
排序：MatSort；
构造函数（专用数据服务：DataStorageService）{
超级（）；
}
/**
*将此数据源连接到表。仅当
*返回的流发出新项。
*@返回要呈现的项目流。
*/
connect（）：可观察{
//将影响渲染数据的所有内容合并到一个更新中
//要使用的数据表的流。
this.dataService.getBranchs（）.subscribe（branchs=>{
//控制台日志（分支）；
this.data=[…分支]；
//这个.data=分支；
console.log（this.data）；
this.paginator.length=this.data.length；
});
常数数据突变=[
（此数据）的可观察性，
这个.paginator.page，
this.sort.sortChange
];
//返回合并（…数据突变）
//.烟斗(
//映射（（）=>this.getPagedData（this.getSortedData（[…this.data]））
// );
返回合并（…数据突变）.pipe（映射（（）=>{
返回this.getPagedData（this.getSortedData（[…this.data]）；
}));
}
/**
*在销毁表时调用。使用此函数清理
*任何打开的连接或释放在连接期间设置的任何保留资源。
*/
断开连接（）{}
/**
*对数据进行分页（客户端）。如果使用服务器端分页，
*这将通过从服务器请求适当的数据来代替。
*/
私有getPagedData（数据：分支[]）{
const startIndex=this.paginator.pageIndex*this.paginator.pageSize；
返回data.splice（startIndex，this.paginator.pageSize）；
}
/**
*对数据进行排序（客户端）。如果使用服务器端排序，
*这将通过从服务器请求适当的数据来代替。
*/
私有getSortedData（数据：分支[]）{
如果（！this.sort.active | | this.sort.direction==“”）{
返回数据；
}
返回数据。排序（（a，b）=>{
const isAsc=this.sort.direction=='asc'；
开关（this.sort.active）{
案例“id”：返回比较（+a.id、+b.id、isAsc）；
案例'branchCode'：返回比较（a.branchCode，b.branchCode，isAsc）；
案例“主机”：返回比较（+a.host、+b.host、isAsc）；
案例“ftpPort”：返回比较（+a.ftpPort、+b.ftpPort、isAsc）；
案例“用户名”：返回比较（+a.username，+b.username，isAsc）；
案例“password”：返回比较（+a.password、+b.password、isAsc）；
案例“folderPathIn”：返回比较（+a.folderPathIn，+b.folderPathIn，isAsc）；
案例“FolderPathut”：返回比较（+a.FolderPathut，+b.FolderPathut，isAsc）；
默认值：返回0；
}
});
}
}
/**简单排序比较器，例如ID/Name列（用于客户端排序）*/
函数比较（a:string | number，b:string | number，isAsc:boolean）{
回报率（a