问题描述
我在用角质材料做分页器。但这是行不通的。我用谷歌搜索并尝试了很多东西，但是没有用。这是我的component.html
<kt-portlet>
<kt-portlet-header [class]="'card-head-lg'" >
<ng-container ktPortletTitle>
<span>Subjects list</span>
</ng-container>
<ng-container ktPortletTools>
<button (click)="addSubject()" mat-raised-button matTooltip="Create new subject" color="primary"
type="button">
<span>New Subject</span>
</button>
</ng-container>
</kt-portlet-header>
<kt-portlet-body>
<div class="form mb-3">
<div>
<div class="row align-items-center">
<div class="col-md-4 kt-margin-bottom-10-mobile">
<label>Search:</label>
<mat-form-field class="mat-form-field-fluid" appearance="outline">
<input matInput [(ngModel)]="searchKey" (keyup)="applyFilter()" />
<button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="searchKey" (click)="onSearchClear()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
</div>
</div>
<div class="row align-items-center collapse form-group-actions kt-margin-top-20 kt-margin-bottom-20"
[ngClass]="{'show' : selection.selected.length > 0}">
<div class="col-xl-12">
<div class="form-group form-group-inline">
<div class="form-label form-label-no-wrap">
<label class="font-bold font-danger">
<span>Records selected:</span>
{{ selection.selected.length }}
</label>
</div>
<div>
<ng-container>
<button (click)="deleteSubjects()" mat-raised-button color="warn"
matTooltip="Delete selected subjects" class="mat-button-mt-4">
<mat-icon>delete</mat-icon>
Delete All
</button>
</ng-container>
</div>
</div>
</div>
</div>
</div>
<div class="mat-table-wrapper" [hidden]="loading">
<mat-table class="lmat-elevation-z8" #table [dataSource]="dataSource" matSort #sort1="matSort"
matSortActive="id" matSortDirection="asc" matSortdisableClear>
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef class="mat-column-checkBox">
<mat-checkBox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()" [color]="'primary'">
</mat-checkBox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="mat-column-checkBox">
<mat-checkBox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
[color]="'primary'">
</mat-checkBox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.description}}</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
<mat-cell *matCellDef="let subject">
<span
class="label label-lg label-light-{{ getItemCssClassByStatus(subject.status) }} label-inline">{{ getItemStatusstring(subject.status) }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell *matCellDef="let element">
<ng-container>
<button (click)="editSubject(element)" mat-icon-button color="primary" matTooltip="Edit subject"
>
<mat-icon>create</mat-icon>
</button>
</ng-container>
<ng-container>
<button (click)="deleteSubject(element.id)" mat-icon-button color="warn" matTooltip="Delete subject" type="button"
>
<mat-icon>delete</mat-icon>
</button>
</ng-container>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
<div class="mat-table-bottom">
<mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5,10,15 ]"
[showFirstLastButtons]="true"></mat-paginator>
</div>
</kt-portlet-body>
</kt-portlet>
这是我的组件。
import { Component,OnInit,ViewChild,AfterViewInit } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog,MatDialogConfig } from '@angular/material/dialog';
import { LayoutUtilsService,MessageType } from '../../../../../../core/_base/crud';
// Services and Models
import { SubjectService } from "../../service/subject.service"
import { Subject } from '../../../models/ISubject';
import { EditSubjectComponent } from '../../subject-edit/edit-subject/edit-subject.component';
@Component({
selector: 'kt-subject-list',templateUrl: './subject-list.component.html',})
export class SubjectListComponent implements OnInit,AfterViewInit {
dataSource: MatTableDataSource<any>;
@ViewChild(MatSort,null) sort: MatSort;
@ViewChild(MatPaginator,{ static: false }) paginator: MatPaginator;
displayedColumns: string[] = ['select','name','description','status','actions'];
searchKey: string;
selection = new SelectionModel<Subject>(true,[]);
subjectResult: Subject[] = [];
loading = true;
constructor(
public dialog: MatDialog,public snackBar: MatSnackBar,private layoutUtilsService: LayoutUtilsService,private subjectService: SubjectService
) {
}
ngOnInit() {
this.relodGrid();
}
ngAfterViewInit(): void {
}
relodGrid() {
this.loading = true;
this.subjectService.getAll().subscribe(
list => {
let array = list.content.map(item => {
return {
id: item.id,name: item.name,description: item.description,status:item.status
};
});
debugger;
this.loading = false;
this.subjectResult = list.content;
this.dataSource = new MatTableDataSource(array);
this.dataSource.sort = this.sort;
setTimeout(() => {
this.dataSource.paginator = this.paginator;
});
this.dataSource.filterPredicate = (data,filter) => {
return this.displayedColumns.some(ele => {
return ele != 'status' && ele != 'actions' && ele != 'select' && data[ele].toLowerCase().indexOf(filter) != -1;
});
};
}
);
}
deleteSubject(id) {
const _title: string = "Delete Subject";
const _description: string = "Are you sure to delete the subject?";
const _waitDesciption: string = "Deleting Subject";
const _deleteMessage = "Subject has successfully deleted";
const dialogRef = this.layoutUtilsService.deleteElement(_title,_description,_waitDesciption);
dialogRef.afterClosed().subscribe(res => {
if (!res) {
return;
}
this.subjectService.delete(id).subscribe((result) => {
this.relodGrid();
this.layoutUtilsService.showActionNotification(_deleteMessage,MessageType.Delete);
});
});
}
deleteSubjects() {
const _title: string = "Delete All Subjects";
const _description: string = "Are you sure to delete all subjects";
const _waitDesciption: string = "Deleting";
const dialogRef = this.layoutUtilsService.deleteElement(_title,_waitDesciption);
dialogRef.afterClosed().subscribe(res => {
if (!res) {
return;
}
debugger;
const idsForDeletion: number[] = [];
for (let i = 0; i < this.selection.selected.length; i++) {
idsForDeletion.push(this.selection.selected[i].id);
}
this.subjectService.deleterange(idsForDeletion).subscribe((result) => {
if(result.operationSuccess){
this.relodGrid();
this.layoutUtilsService.showActionNotification("All subjects deleted successfully",MessageType.Delete);
this.selection.clear();
}else{
this.layoutUtilsService.showActionNotification("Some error occurred while deleting records.",MessageType.Delete);
}
});
});
}
isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.subjectResult.length;
return numSelected === numRows;
}
masterToggle() {
if (this.selection.selected.length === this.dataSource.data.length) {
this.selection.clear();
} else {
this.dataSource.data.forEach(row => this.selection.select(row));
}
}
addSubject() {
const newSubject = new Subject();
newSubject.id =0;
newSubject.name='',newSubject.description='';
newSubject.status = 1;
this.subjectService.initializeformGroup(); // Set all defaults fields
this.editSubject(newSubject);
}
editSubject(subject: Subject) {
const dialogConfig = new MatDialogConfig();
dialogConfig.width = "50%";
dialogConfig.disableClose = false;
dialogConfig.data = {subject}
this.subjectService.populateForm(subject);
const dialogRef = this.dialog.open(EditSubjectComponent,dialogConfig);
dialogRef.afterClosed().subscribe(res => {
this.subjectService.form.reset();
this.relodGrid();
});
}
onSearchClear() {
this.searchKey = "";
this.applyFilter();
}
applyFilter() {
this.dataSource.filter = this.searchKey.trim().toLowerCase();
}
getItemCssClassByStatus(status: number = 0): string {
switch (status) {
case 0:
return 'danger';
case 1:
return 'success';
}
return '';
}
/**
* Returns Item Status in string
* @param status: number
*/
getItemStatusstring(status: number = 0): string {
switch (status) {
case 0:
return 'disabled';
case 1:
return 'Enabled';
}
return '';
}
}
这是我的setup.module，我也在其中导入Mat-paginator。 错误显示在浏览器控制台中
index.d.ts.MatPaginator.html:1 ERROR TypeError: Cannot read property 'pipe' of undefined
at MatSelect.ngAfterContentinit (select.js:613)
at callProviderLifecycles (core.js:33979)
at callElementProvidersLifecycles (core.js:33951)
at callLifecycleHooksChildrenFirst (core.js:33933)
at checkAndUpdateView (core.js:46590)
at callViewAction (core.js:46951)
at execEmbeddedViewsAction (core.js:46908)
at checkAndUpdateView (core.js:46586)
at callViewAction (core.js:46951)
at execEmbeddedViewsAction (core.js:46908)
我还重新安装了角材，并按照人们的建议尝试了许多事情，但仍然无法正常工作。
解决方法
我通过更新角度/材质解决了该问题。另外，我已经改变了
import { MatTableDataSource } from '@angular/material';
到
import { MatTableDataSource } from '@angular/material/table';
它解决了我的问题。希望对其他人有帮助。