Question

晚上好，我正在从材质角度表中的 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>

材质角度表中的 API 数据。我已经渲染了数据并实现了排序解决方案，但是当我放置 |slice:10 时，我的排序停止工作。有什么建议吗？

Answer 1

我刚刚实现了分页来限制行数。

材料角表未排序

1 个答案: