材質 Angular 表未排序

Question

晚上好，我正在從材料 Angular 表中的 API 渲染數據。 數據顯示，並且排序有效，但是一旦我輸入“dataSource.filteredData|slice:10”，我的排序就會停止工作。 我只是想動態顯示 10 行。

 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { NasaApiService} from '../nasa-api.service'; import {HttpClient} from '@angular/common/http'; import { MatTable } from '@angular/material/table'; import { MatSort } from '@angular/material/sort' import { MatTableDataSource } from '@angular/material/table'; const api = 'https://data.nasa.gov/resource/gh4g-9sfh.json'; @Component({ selector: 'app-nasa', templateUrl: './nasa.component.html', styleUrls: ['./nasa.component.css'] }) export class NasaComponent implements OnInit { data; dataSource; displayedColumns: string[] = ['name', 'nametype', 'id', 'year', 'recclass']; @ViewChild(MatSort, {static: false}) sort: MatSort; constructor(private _nasa: NasaApiService) { } ngOnInit(){ this._nasa.getNasaData().subscribe(data => { this.data = data; this.dataSource = new MatTableDataSource(this.data); this.dataSource.sort = this.sort; console.log(this.data); }) } ngAfterViewInit() { } }

 <table mat-table [dataSource]="dataSource.filteredData|slice:0:10" matSort class="mat-elevation-z8"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="nametype"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name-Type </th> <td mat-cell *matCellDef="let element"> {{element.nametype}} </td> </ng-container> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="year"> <th mat-header-cell *matHeaderCellDef> Year </th> <td mat-cell *matCellDef="let element"> {{element.year}} </td> </ng-container> <ng-container matColumnDef="recclass"> <th mat-header-cell *matHeaderCellDef> Recclass </th> <td mat-cell *matCellDef="let element"> {{element.recclass}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <div> <table class="ui celled table"> <thead> <tr > <th >Name</th> <th>Name Type</th> <th>Id</th> <th>Year</th> <th>recclass</th> </tr> </thead> <tbody> <tr *ngFor="let info of data | slice:0:10; let i=index" > <td scope="col"> {{info.name}} </td> <td scope="col"> {{info.nametype}} </td> <td scope="col"> {{info.id}} </td> <td scope="col"> {{info.year}} </td> <td scope="col"> {{info.recclass}} </td> </tr> </tbody> </table> </div>

材料 Angular 表中的 API 數據。 我已經渲染了數據並實現了排序解決方案，但是當我放置 |slice:10 時，我的排序停止工作。 有什么建議嗎？

Answer 1

我剛剛實現了分頁來限制行數。