Angular Таблица материалов без данных при добавлении сортировки и разбивки на страницы - PullRequest
Новая
       36

Angular Таблица материалов без данных при добавлении сортировки и разбивки на страницы

1 голос
/ 05 августа 2020

Я учусь использовать этот замечательный 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);
  }
}

Content 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 отображает правильные данные, но не обрабатывается. Почему?

1 Ответ

1 голос
/ 05 августа 2020

Я подозреваю, что вы неправильно обновили dataSource для mat-table.

Поскольку вы используете MatTableDataSource, вам нужно go с: 

this.dataSource.data = data;

, но вы обновили исходный массив this.tableData = data;

...