mat-sort-module не работает после обновления Angular 6 до 7 - PullRequest
0 голосов
/ 21 марта 2019

при импорте matSortModule в файл app.module.ts все исчезнет с сайта и показывает эту ошибку в настроении разработчика.

Ошибка: 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



  Search Patient
Set 4 Set 5 Set 6
Calls (Due on) <!-- <pre>{{ element.calls | json }} ->
Вызов 1 ({{moment (element.calls.call_1_duedate) .format ("YYYY-MM -DD ​​")}}) </ матово-флажок> Вызов 2 ({{moment (element.calls.call_2_duedate) .format ("YYYY-MM -DD ​​")}}) </ мат-флажок>
Вызов 3 ({{moment (element.calls.call_3_duedate) .format ("YYYY-MM -DD ​​")}}) </ матово-флажок> Вызов 4 ({{moment (element.calls.call_4_duedate) .format ("YYYY-MM -DD ​​")}}) </ матово-флажок>
Пациент не выписан
</ Нг-контейнер> </ mat-paginator> </ Матово-карта>

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 { }
...