MatSort не определено - угловой 5 - PullRequest
Новая
       6

MatSort не определено - угловой 5

0 голосов
/ 06 июня 2018

Я пытаюсь реализовать таблицу материалов в моем угловом приложении.Нумерация страниц и фильтр работают нормально, но я не могу отсортировать таблицу.Моя ссылка на MatSort не определена.

Я импортировал ее в AppModule: 

import {MatTableModule} from '@angular/material/table';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule, MatCheckboxModule,MatPaginatorModule,MatInputModule} from '@angular/material';
import {MatSortModule} from '@angular/material/sort';

...
@NgModule({
  declarations: [...],
  imports: [   
     MatSortModule,
     MatTableModule,
     MatPaginatorModule,
     MatInputModule,
     ...
   ]
  })

Вот мой component.ts: 

import { Component, OnInit , ViewChild, AfterViewInit} from '@angular/core';
...
import {MatTableDataSource,MatSort,MatPaginator} from '@angular/material';
...
export class MyClass inplements OnInit, AfterViewInit{
  @ViewChild(MatSort) sort:MatSort;
  @ViewChild(MatPaginator) paginator:MatPaginator;
  ...
  ngAfterViewInit(){
     this.dataSource = new MatTableDataSource(this.fake_data);
     this.dataSource.paginator = this.paginator
     this.dataSource.sort = this.sort
  }
 ...
}

А вот мой компонентHTML: 

<mat-form-field *ngIf="ready" class="width-80">
   <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table class = "mat-elevation-z8 animate" matSort [dataSource]="dataSource" display:flex>
   <ng-container matColumnDef="fake_name">
       <mat-header-cell *matHeaderCellDef mat-sort-header class="columnTitle"><b>{{fake_label.name}}</b></mat-header-cell>
       <mat-cell *matCellDef="let fake;" class="cellContent">{{fake.name}}</mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="fakeColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: fakeColumns" class="animate"></mat-row>
</mat-table>
<mat-paginator [length]="length" [pageSize]="5" [pageSizeOptions]="[5,10,15,20,25,50,100]" showFirstLastButtons></mat-paginator>

Кто-нибудь знает, что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

У меня была та же проблема, и я нашел ответ на проблему Angular .

В моем конкретном случае (и случае этого парня на github) это было решено удалением*ngIf на теге mat-table.Я не уверен, но возможно, что <mat-form-field *ngIf="ready" class="width-80"> вызывает некоторые проблемы.

0 голосов
/ 13 сентября 2018

Проблема может быть исправлена ​​добавлением в apps.module.ts: 

import { MatPaginatorModule } from '@angular/material';

и: 

imports: [
    ....        
    MatSortModule

Надеюсь, это поможет.

...