Question

我已经遵循here中的指示，并且能够按照我的所有观点获得预期的日期时间选择器。当涉及到材料对话框时，日期时间选择器未显示，当我查看控制台时，未发现任何错误。可能是什么原因？

这是我的对话框组件代码。（代码段不会运行，我不会将所有代码段都显示为视图）

import { Component, OnInit, ViewChild, Inject, ElementRef } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { ResourceService } from '../services/resource.service';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatTable } from '@angular/material';
import { FeedPrintJobService } from '../services/feed-print-job.service';
import { PrintJobDragDrop } from '../shared/print-job-drag-drop';
import { NgForm } from '@angular/forms';
import { ShedularService } from '../services/shedular.service';
import { Resource } from '../shared/resource.model';
import { Guid } from 'guid-typescript';
import { ToastrService } from 'ngx-toastr';
import { forOwn } from 'lodash';
import { SchedularJobs } from '../shared/shedular';
import { Scheduler } from 'rxjs';

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'app-schedular',
  templateUrl: './schedular.component.html',
  styleUrls: ['./schedular.component.css'],
})
export class SchedularComponent implements OnInit{
  @ViewChild('table') table: MatTable<PrintJobDragDrop>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  dataSource : any;
  dataSourceFilter : any;
  data : any;

  tableHeaders=[];

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = [
  'id',
  'timestamp',
  'emaiAddress',
  'to',
  'from',
  'customerName',
  'status'//,
  //'star'
  ];
  constructor(private resService : ResourceService,private feedJobService : FeedPrintJobService,public dialog: MatDialog,private service : ShedularService) {
  }

  animal: string;
  name: string;

  openDialog(item: any): void {
    debugger
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      //width: '500px',
      data: item
    });

    //this.service.

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

  openModifySchedularDialog(response: any):void 
  {
    const dialogRef = this.dialog.open(ModifySchedularJobDialogBox, {

      //width: '500px',
      data: response
    });
    console.log(this.service.ScheduledJobDet);

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      //this.animal = result;
    });
  }

  ngOnInit(): void {
    this.resService.getDepartmentList();
    this.resService.getLocationList();

      this.getQueuedJobList();
      this.service.formData = 
      {
         id:'00000000-0000-0000-0000-000000000000',
         borad : '',
         dateAndTime : Date.now(),
         locationId : 0,
         printJobId : '00000000-0000-0000-0000-000000000000',
        resourceId : 0
      }
  }
  getQueuedJobList(): any {
    this.feedJobService.getQueuedJobListForDragDrop().subscribe(
      response => {
        debugger
        if(response)
        {
          this.data = response;
          this.dataSource = new MatTableDataSource(this.data);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
        }
        
      });
  }

  todo = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ];

  dateTimeColumn = [];

  drop(event: CdkDragDrop<PrintJobDragDrop[]>) {
    debugger

    this.service.schedularJobList.forEach(element => {
      element.printJobId = event.item.data.id;
      element.id='00000000-0000-0000-0000-000000000000';
    });
    this.openDialog(event.item.data);
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex);
    }
  }
  dropTable(event: CdkDragDrop<PrintJobDragDrop[]>) {
    const prevIndex = this.dataSource.findIndex((d) => d === event.item.data);
    moveItemInArray(this.dataSource, prevIndex, event.currentIndex);
    this.table.renderRows();
  }
    /** Predicate function that doesn't allow items to be dropped into a list. */
    noReturnPredicate() {
      return false;
    }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  openModifyDialog(id:string,resourceName: number,dateAndTime: string)
  {
    debugger
    this.service.getScheduledJobdeatils(id,resourceName).subscribe(
      response => {
        debugger
        if(response)
        {
          this.openModifySchedularDialog(response);      
        }       
      });
    
  }
  onSubmit(form: NgForm) {
    debugger;
    console.log(form.value);
    if (form.value!=null)
    {
      this.service.setGlobalDateAndLocationId(form.value);
      this.resService.setLocationId(form.value.locationId);     
      this.service.setDateTimeColumn(form.value.datetime);
      this.service.getResourceListbyLocationId(form.value.locationId).subscribe(
      response => {
         
      });


      this.service.getLocSpecificDetails(form.value.locationId).subscribe(res=>{
        if(res)
        {
          debugger
          this.service.schedularJob = 
          {
            id : '',
            endsAt : '',
            isActive : false,
            isCompleted : false,
            isFinal : false,
            printJobId : '',
            resourceId : 0,
            startsAt : ''
          }

          for (let key in res) {
            let value = res[key];
            // Use `key` and `value`
          }

          //for(let i=0; i< Object.keys(res).length; i++)
          for (let key in res)
          {
            debugger
            this.service.schedularJob = 
            {
              id : '00000000-0000-0000-0000-000000000000',
              endsAt : '',
              isActive : false,
              isCompleted : false,
              isFinal : false,
              printJobId : '',
              resourceId : 0,//res[key][0].resourceId,
              startsAt : ''
            }
            this.service.schedularJobList.push(this.service.schedularJob)
          }
          console.log(this.service.schedularJobList[1]);
        }
      });

    }
    else{
      //this.updateRecord(form);
    }
  }
}





@Component({
  selector: 'dialog-dialog',
  templateUrl: 'dialog-box.html',
})

export class DialogOverviewExampleDialog implements OnInit{

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  
  dataSource : any;
  dataSourceFilter : any;
  tableData : any;

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,private resService : ResourceService,private feedJobService : FeedPrintJobService,private service : ShedularService,private toastr:ToastrService) {}

    ngOnInit(): void {
      let locId = this.resService.getSelectedLocationId();

      this.resService.formData=
      {
        departmentId : 0,
        isActive : false,
        isDeleted : false,
        locationId : locId,
        name :'',
        resourceId : 0
      };

      this.resService.getDepartmentList();
      this.resService.getLocationList();
    }
  
  onNoClick(): void {
    this.dialogRef.close();
  }

  doSomething(event)
  {
    console.log(event.value);
    this.resService.getResource(event.value);
  }

  onSubmitSchedular(schedularJobList: SchedularJobs[]) {

    debugger;
    if (schedularJobList!=null)
    {
      this.service.InsertSchedular(schedularJobList).subscribe(res => {
        debugger
        this.toastr.success('Schedular record created successfully', 'Schedular');
        this.ResetScheduledJobTableData();
        this.onNoClick();
        this.getQueuedJobList();
      });
    }
    else{
    }
  }


}

以下是日期时间选择器的输入

      <input 
  class="form-control"
  type="text" 
  mwlFlatpickr 
  name="selectedDate"
  [(ngModel)]="selectedDate" 
  [altInput]="true" 
  [convertModelValue]="true">

angularx-flatpickr在Angular 7的Material Modal中不起作用

0 个答案: