angular8 - 材料表上的Angular 8分页和排序不起作用

Question

这是我在这里的组件排序和分页不起作用我不知道这有什么问题可以请有人帮我解决这个问题。这是我在这里的组件排序和分页不起作用我不知道这有什么问题可以请有人帮我解决这个问题。这是我在这里的组件排序和分页不起作用我不知道这有什么问题可以请有人帮我解决这个问题。

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import { ModelRegistryService } from './service/model-registry.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatTableDataSource, MatTableModule } from '@angular/material';
import { NgModule } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';


export interface Models{
  nxt_uid: string;
  nxt_model_name: string;
  nxt_model_category: string;
  nxt_model_stage: string;
  nxt_registered_date: string;
}
 const ELEMENT_DATA: Models[] = [];
@NgModule({
  imports: [MatTableModule, MatTableDataSource]
})
@Component({
  selector: 'app-model-registry',
  templateUrl: './model-registry.component.html',
  styleUrls: ['./model-registry.component.scss']
})
export class ModelRegistryComponent implements OnInit {
    loadedModels = [];
  searchValue: string;

  ELEMENT_DATA : Models[];
  displayedColumns: string[] = ['nxt_uid', 'nxt_model_name', 'nxt_model_category', 'nxt_model_stage', 'nxt_registered_date'];
  dataSource = new MatTableDataSource<Models>(ELEMENT_DATA);
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(private http: HttpClient, public route: Router, public modelService: ModelRegistryService) { }

  ngOnInit() {
    this.modelService.fetchModel().subscribe(posts =>{
      let data = JSON.parse(posts.toString());
      // console.log(data);
      this.loadedModels = data;
     this.dataSource.data = data as Models[];
    
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    });

  }

  onSelected(nxt_uid, item){
    this.modelService.changeMessage(item);
    this.route.navigateByUrl('model-registry/detail/'+nxt_uid);
  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
 
}


this is my html

<div class="list_page" *ngIf="loadedModels.length > 1">
    <!-- <p *ngIf="loadedModels.length < 1">No models is there</p> -->

<div class="last_update" >
    <span>Last update on 06.08.2020</span>
    <div class="flex_cls">
        <div>
            <span><span class="count">{{ (loadedModels | searchfilter:searchValue).length }}</span> Models</span>
        </div>
        <div class="filter-sec">

            <!-- <div>
                <input type="text" [(ngModel)]="searchValue" class="form-control" id="search" placeholder="search">
            </div> -->

            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>

            <!-- <div class="n1">
                <a href="#"><img src="assets/icons/filter.png" alt="" title=""></a>
            </div> -->
            <div class="n1">
                <a href="#"><img src="assets/icons/calendar.png" alt="" title=""></a>
            </div>
            <div class="n1">
                <a href="#"><img src="assets/icons/export.svg" alt="" title=""></a>
            </div>
            <div class="n1">
                <a href="#"><img src="assets/icons/delete.png" alt="" title=""></a>
            </div>
        </div>
    </div>
</div>

<div class="filter-option">
    <span>Devlopment</span>
    <span>Stage</span>
    <span>Testing</span>
    <span>Prod</span>
</div>


<div class="inner_cls_1">
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="list-view">
                <div class="example-container mat-elevation-z8">
                    <table mat-table [dataSource]="dataSource" matSort>
                   
                      <ng-container matColumnDef="nxt_uid">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> UID </mat-header-cell>
                        <mat-cell *matCellDef="let element"> 
                            <button mat-button (click)="onSelected(element.nxt_uid, element)">{{element.nxt_uid}}</button>
                        </mat-cell>
                      </ng-container>
                      
                      <ng-container matColumnDef="nxt_model_name">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Model Name </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.nxt_model_name}} </mat-cell>
                      </ng-container>
                     
                      <ng-container matColumnDef="nxt_model_category">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.nxt_model_category}} </mat-cell>
                      </ng-container>
                     
                      <ng-container matColumnDef="nxt_model_stage">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Model Stage </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.nxt_model_stage}} </mat-cell>
                      </ng-container>
                
                      <ng-container matColumnDef="nxt_registered_date">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Registered Date </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.nxt_registered_date | date: 'short'}} </mat-cell>
                      </ng-container>
                  
                      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                    </table>
                    <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
                  </div>

            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12 d-none d-sm-block">
            <div class="preview_img">
                <div class="inner_cls">
                    <img src="assets/boiler_image.jpg" alt="image" title="image">
                </div>
            </div>
        </div>
    </div>
</div>
</div>

标签： angular8