时间戳

首页 > 解决方案 > 添加排序和分页时没有数据的角度材料表

angular - 添加排序和分页时没有数据的角度材料表

问题描述

我正在学习使用这个很棒的有角度的材料组件，即数据表。我设法让它在我的自定义应用程序中工作，但是当我尝试添加排序和分页时，尽管在日志中受到监控，数据还是消失了。

我做错了什么，有人可以指出我正确的方向吗？相关代码：

处理和接收所有数据的基本组件：

export class BaseComponent implements OnInit {
  public tableData: any;
  readonly displayedColumns = ['id', 'sol', 'earth_date', 'img_source'];
  readonly cameras: string[] = [
    'FHAZ',
    'RHAZ',
    'MAST',
    'NAVCAM',
    'CHEMCAM',
    'MAHLI',
    'MARDI',
    'PANCAM',
    'MINITES',
  ];
  readonly camera = 'FHAZ';
  roverData: Rover[];
  dataSource = new MatTableDataSource<any>(this.tableData);
  constructor(private dataService: DataService) {}

  ngOnInit(): void {}

  eventCaptured($event) {
    this.dataService.searchByCamera($event).subscribe((data) => {
      this.roverData = this.tableData = data;
      console.log(this.tableData);
    });
  }

通过 Input（基本组件 html）传递数据：

 <div class="col-md-6">
      <app-content
      [roverData]="roverData"
      [dataSource]="dataSource"
      [displayedColumns]="displayedColumns"
      ></app-content>
    </div>

显示表格的内容组件 (TS)

export class ContentComponent implements OnInit, OnChanges {
 @Input() roverData: Rover[];
 @Input() dataSource: any;
 @Input() displayedColumns: string[];
 @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 @ViewChild(MatSort, { static: true }) sort: MatSort;
  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges){
    console.log(changes);
  }
}

内容 HTML（表格）

<mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let r"> {{r.id}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="sol">
    <mat-header-cell *matHeaderCellDef> Sol </mat-header-cell>
    <mat-cell *matCellDef="let r"> {{r.sol}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="earth_date">
    <mat-header-cell *matHeaderCellDef> Earth Date </mat-header-cell>
    <mat-cell *matCellDef="let r"> {{r.earth_date}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="img_source">
    <mat-header-cell *matHeaderCellDef> Rover Image </mat-header-cell>
    <mat-cell *matCellDef="let r">
      
          <img  class="img-fluid" src="{{r.img_src}}" alt="rover camera">

    </div>
    </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 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

onChnges Hook 显示正确的数据，但它没有被渲染。为什么？

标签： angulardatatableangular-material

解决方案

我怀疑您错误地更新dataSource了 mat-table。

既然您正在使用，MatTableDataSource那么您需要使用：

this.dataSource.data = data;

但是您更新了原始数组this.tableData = data;

推荐阅读