当我在app.module.ts文件中导入matSortModule时，所有内容都会从网站上消失，并以开发人员的心情显示此错误。
错误：MatSortHeader必须与 MatSort指令。
我已经在这里附加了项目的所有文件，请帮助我解决此问题
app.component.ts代码：
import { Component, OnInit, ViewChild } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { MatTableDataSource, MatPaginator, MatSort, MatDialog, MatSnackBar } from '@angular/material';
import * as _moment from 'moment';
import "rxjs/add/operator/map";
import { GenericConfirmDialogComponent } from '../generic-confirm-dialog/generic-confirm-dialog.component';
import { AngularFireAuth } from '@angular/fire/auth';
type AvailableSets = "set_1" | "set_2" | "set_3" | "set_4" | "set_5" | "set_6";
type AvailableCalls = "call_1" | "call_2" | "call_3" | "call_4";
@Component({
selector: 'app-dashboard-patient-call-manager',
templateUrl: './dashboard-patient-call-manager.component.html',
styleUrls: ['./dashboard-patient-call-manager.component.css']
})
export class DashboardPatientCallManagerComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
public inrequest = false;
public me = null;
public moment = _moment;
public patients : MatTableDataSource<ApprovedUsers> = new MatTableDataSource<ApprovedUsers>();
public displayedColumns = [
"name",
"mrnumber",
"phone",
"caregivername",
"sets",
"calls",
];
constructor(
private fs : AngularFirestore,
private auth : AngularFireAuth,
private dialog : MatDialog,
private snackbar : MatSnackBar,
) {
let z = this.auth.user.subscribe( user => {
this.me = user.uid;
z.unsubscribe();
});
}
ngOnInit() {
this.fs.collection("Users", ref => ref.where("req_approval", "==", true)).snapshotChanges().subscribe( data =>{
let clist : ApprovedUsers[] = [];
for( let c of data){
let x = c.payload.doc;
let d = new ApprovedUsers(this.fs);
d.patient_name = x.get("name");
d.mr_number = x.get("mr_number");
d.caregiver_phone = x.get("phone");
d.caregiver_name = x.get("caregiver_name");
d.phone = x.id;
console.log(d);
clist.push(d);
}
this.patients = new MatTableDataSource<ApprovedUsers>(clist);
this.patients.paginator = this.paginator;
this.patients.sort = this.sort;
});
}
async setSetSelection(phone : string, set : AvailableSets, state : boolean){
let x = {};
x[set] = state;
x[set+"_date"] = _moment().valueOf();
try{
await this.fs.collection("Sets").doc(phone).update(x);
await this.fs.collection("SetLog").add({
state: state,
phone: phone,
logtime: _moment().valueOf(),
set: set,
by: this.me,
});
this.snackbar.open("Set collection updated.", "", { duration: 2000});
}catch( e ){
console.log(e);
this.snackbar.open("There was an error.", "", { duration: 2000});
}
}
async setCallSelection(phone : string, call : AvailableCalls, state : boolean){
let x = {};
x[call] = state;
await this.fs.collection("Calls").doc(phone).update(x);
await this.fs.collection("CallLog").add({
state: state,
phone: phone,
logtime: _moment().valueOf(),
call: call,
by: this.me,
});
this.snackbar.open("Calls updated.", "", { duration: 2000});
}
applyFilter(query : string){
this.patients.filter = query.trim().toLowerCase();
}
}
export class CallList{
private _phone : string = null;
patient_name : string = null;
caregiver_name : string = null;
mr_number : string = null;
public sets : {
set_1: boolean,
set_2: boolean,
set_3: boolean,
set_4: boolean,
set_5: boolean,
set_6: boolean,
} = {
set_1: null,
set_2: null,
set_3: null,
set_4: null,
set_5: null,
set_6: null,
};
public calls : {
call_1 : boolean,
call_1_duedate : number,
call_2 : boolean,
call_2_duedate : number,
call_3 : boolean,
call_3_duedate : number,
call_4 : boolean,
call_4_duedate : number,
} = {
call_1: null,
call_1_duedate: 0,
call_2: null,
call_2_duedate: 0,
call_3: null,
call_3_duedate: 0,
call_4: null,
call_4_duedate: 0,
};
constructor(private fs : AngularFirestore){}
set phone (phone : string) {
this._phone = phone;
this.fs.collection("Sets").doc(phone).valueChanges().first().toPromise().then(data => {
try{
this.sets['set_1'] = data['set_1'];
this.sets['set_2'] = data['set_2'];
this.sets['set_3'] = data['set_3'];
this.sets['set_4'] = data['set_4'];
this.sets['set_5'] = data['set_5'];
this.sets['set_6'] = data['set_6'];
}catch(e){
this.sets['set_1'] = false;
this.sets['set_2'] = false;
this.sets['set_3'] = false;
this.sets['set_4'] = false;
this.sets['set_5'] = false;
this.sets['set_6'] = false;
}
});
this.fs.collection("Users").doc(phone).valueChanges().first().toPromise().then( data => {
this.caregiver_name = typeof data['caregiver_name'] === "undefined" ? "" : data['caregiver_name'];
this.patient_name = typeof data['name'] === "undefined" ? "" : data['name'];
this.mr_number = typeof data['mr_number'] === "undefined" ? "" : data['mr_number'];
});
}
get phone(){
return this._phone;
}
}
class ApprovedUsers{
public patient_name : string = null;
public mr_number : string = null;
public caregiver_name : string = null;
public caregiver_phone : string = null;
private _phone : string = null;
public sets : {
set_1: boolean,
set_2: boolean,
set_3: boolean,
set_4: boolean,
set_5: boolean,
set_6: boolean,
} = {
set_1: false,
set_2: false,
set_3: false,
set_4: false,
set_5: false,
set_6: false,
};
public calls : {
call_1 : boolean,
call_1_duedate : number,
call_2 : boolean,
call_2_duedate : number,
call_3 : boolean,
call_3_duedate : number,
call_4 : boolean,
call_4_duedate : number,
} = null;
constructor(private fs : AngularFirestore){}
set phone( value : string ){
this._phone = value;
let x = this.fs.collection("Sets").doc(value).get().subscribe( (data) => {
try{
this.sets['set_1'] = data.get('set_1');
this.sets['set_2'] = data.get('set_2');
this.sets['set_3'] = data.get('set_3');
this.sets['set_4'] = data.get('set_4');
this.sets['set_5'] = data.get('set_5');
this.sets['set_6'] = data.get('set_6');
}catch(e){
this.sets['set_1'] = false;
this.sets['set_2'] = false;
this.sets['set_3'] = false;
this.sets['set_4'] = false;
this.sets['set_5'] = false;
this.sets['set_6'] = false;
}
x.unsubscribe();
});
let y = this.fs.collection("Calls").doc(value).get().subscribe( (data) => {
if(data.exists){
this.calls = {
call_1: null,
call_1_duedate: null,
call_2: null,
call_2_duedate: null,
call_3: null,
call_3_duedate: null,
call_4: null,
call_4_duedate: null,
}
this.calls.call_1 = data.get("call_1");
this.calls.call_1_duedate = data.get("call_1_date");
this.calls.call_2 = data.get("call_2");
this.calls.call_2_duedate = data.get("call_2_date");
this.calls.call_3 = data.get("call_3");
this.calls.call_3_duedate = data.get("call_3_date");
this.calls.call_4 = data.get("call_4");
this.calls.call_4_duedate = data.get("call_4_date");
}else{
this.calls = null;
}
y.unsubscribe();
});
}
}
app.component.html
<mat-progress-bar mode="query" [hidden]="!inrequest"></mat-progress-bar>
<div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="10px" style="padding: 15px 25px;">
<div class="page-title">Search Patient</div>
<mat-card>
<mat-form-field>
<input matInput placeholder="Search Patient" type="text" name="search" (keyup)="applyFilter($event.target.value)">
</mat-form-field>
<table mat-table matSort [dataSource]="patients">
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Caregiver Phone #</th>
<td mat-cell *matCellDef="let element">{{element.phone}}</td>
</ng-container>
<ng-container matColumnDef="mrnumber">
<th mat-header-cell *matHeaderCellDef mat-sort-header>MR Number</th>
<td mat-cell *matCellDef="let element">{{element.mr_number}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Patient Name</th>
<td mat-cell *matCellDef="let element"> {{element.patient_name}} </td>
</ng-container>
<ng-container matColumnDef="caregivername">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Caregiver Name</th>
<td mat-cell *matCellDef="let element"> {{element.caregiver_name}} </td>
</ng-container>
<ng-container matColumnDef="sets">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="text-align: center;">Video Sets</th>
<td mat-cell *matCellDef="let element">
<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="5px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
<mat-slide-toggle color="primary" [(ngModel)]="element.sets.set_1" (change)="setSetSelection(element.phone, 'set_1', element.sets.set_1)">Set 1</mat-slide-toggle>
<mat-slide-toggle color="primary" [(ngModel)]="element.sets.set_2" (change)="setSetSelection(element.phone, 'set_2', element.sets.set_2)">Set 2</mat-slide-toggle>
<mat-slide-toggle color="primary" [(ngModel)]="element.sets.set_3" (change)="setSetSelection(element.phone, 'set_3', element.sets.set_3)">Set 3</mat-slide-toggle>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
<mat-slide-toggle color="primary" [(ngModel)]="element.sets.set_4" (change)="setSetSelection(element.phone, 'set_4', element.sets.set_4)">Set 4</mat-slide-toggle>
<mat-slide-toggle color="primary" [(ngModel)]="element.sets.set_5" (change)="setSetSelection(element.phone, 'set_5', element.sets.set_5)">Set 5</mat-slide-toggle>
<mat-slide-toggle color="primary" [(ngModel)]="element.sets.set_6" (change)="setSetSelection(element.phone, 'set_6', element.sets.set_6)">Set 6</mat-slide-toggle>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="calls">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="text-align: center;">Calls (Due on)</th>
<td mat-cell *matCellDef="let element">
<!-- <pre>{{ element.calls | json }}</pre> -->
<div fxLayout="column" *ngIf="element.calls !== null" fxLayoutAlign="start center" fxLayoutGap="5px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
<mat-checkbox color="primary" (change)="setCallSelection(element.phone, 'call_1', element.calls.call_1)" [(ngModel)]="element.calls.call_1"><span [ngClass]="{'duedated': !element.calls.call_1 && element.calls.call_1_duedate < moment().valueOf() }">Call 1 ({{ moment(element.calls.call_1_duedate).format("YYYY-MM-DD")}})</span></mat-checkbox>
<mat-checkbox color="primary" (change)="setCallSelection(element.phone, 'call_2', element.calls.call_2)" [(ngModel)]="element.calls.call_2"><span [ngClass]="{'duedated': !element.calls.call_2 && element.calls.call_2_duedate < moment().valueOf() }">Call 2 ({{ moment(element.calls.call_2_duedate).format("YYYY-MM-DD")}})</span></mat-checkbox>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
<mat-checkbox color="primary" (change)="setCallSelection(element.phone, 'call_3', element.calls.call_3)" [(ngModel)]="element.calls.call_3"><span [ngClass]="{'duedated': !element.calls.call_3 && element.calls.call_3_duedate < moment().valueOf() }">Call 3 ({{ moment(element.calls.call_3_duedate).format("YYYY-MM-DD")}})</span></mat-checkbox>
<mat-checkbox color="primary" (change)="setCallSelection(element.phone, 'call_4', element.calls.call_4)" [(ngModel)]="element.calls.call_4"><span [ngClass]="{'duedated': !element.calls.call_4 && element.calls.call_4_duedate < moment().valueOf() }">Call 4 ({{ moment(element.calls.call_4_duedate).format("YYYY-MM-DD")}})</span></mat-checkbox>
</div>
</div>
<div fxLayout="column" *ngIf="element.calls === null" fxLayoutAlign="start center" fxLayoutGap="5px">Patient not discharged</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
</mat-card>
</div>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { environment } from '../environments/environment';
import "hammerjs";
import {
MatCardModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatSnackBarModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatListModule,
MatTableModule,
MatSlideToggleModule,
MatPaginatorModule,
MatSortModule,
MatCheckboxModule,
MatDialogModule,
MatSelectModule,
MatDatepickerModule,
DateAdapter,
MAT_DATE_LOCALE,
MAT_DATE_FORMATS,
MatRadioModule,
} from '@angular/material';
import { MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from "@angular/material-moment-adapter"
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardApprovalsComponent } from './dashboard-approvals/dashboard-approvals.component';
import { GenericConfirmDialogComponent } from './generic-confirm-dialog/generic-confirm-dialog.component';
import { DashboardUsersAllowedComponent } from './dashboard-users-allowed/dashboard-users-allowed.component';
import { DashboardPatientRegistrationComponent } from './dashboard-patient-registration/dashboard-patient-registration.component';
import { DashboardPatientCallManagerComponent } from './dashboard-patient-call-manager/dashboard-patient-call-manager.component';
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'app', component: DashboardComponent, children: [
{ path: "", component: DashboardApprovalsComponent },
{ path: 'patient-registration', component: DashboardPatientRegistrationComponent},
{ path: 'panel-approvals', component: DashboardUsersAllowedComponent },
{ path: 'manage-call-sets', component: DashboardPatientCallManagerComponent },
]},
];
const MY_DATE_FORMATS = {
parse: {
dateInput: 'YYYY-MM-DD',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent,
DashboardApprovalsComponent,
GenericConfirmDialogComponent,
DashboardUsersAllowedComponent,
DashboardPatientRegistrationComponent,
DashboardPatientCallManagerComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot(routes),
/* FIREBASE */
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
ReactiveFormsModule,
NgxMatSelectSearchModule,
/* MATERIAL */
MatCardModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatSnackBarModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatListModule,
MatTableModule,
MatPaginatorModule,
MatSlideToggleModule,
MatCheckboxModule,
MatDialogModule,
MatSelectModule,
MatDatepickerModule,
MatMomentDateModule,
MatRadioModule,
MatSortModule,
],
providers: [
{provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS},
],
bootstrap: [AppComponent],
entryComponents: [
GenericConfirmDialogComponent,
]
})
export class AppModule { }