Question

我不知所措，我的错误来自哪里。我有一个对话框提示我没有喷油器错误。这是我得到错误提示的行：

  const dialogRef = this.trackDeviceDialogComponent.open(TrackDeviceDialogComponent, dialogConfig);

我得到的错误是

ERROR Error: StaticInjectorError(AppModule)[TrackDeviceDialogComponent -> 
 InjectionToken MatDialogData]: 
   StaticInjectorError(Platform: core)[TrackDeviceDialogComponent -> 
 InjectionToken MatDialogData]: 
     NullInjectorError: No provider for InjectionToken MatDialogData!

但是我导入并在构造函数中声明它：

 import { TrackDeviceDialogComponent } from '../../dialogs/track-device-dialog/track-device-dialog.component';

 constructor(public appSettingsService: AppSettingsService,
               private deviceManagerService: DeviceManagerService,
               private devicesToTrackService: DevicesToTrackService,
               private trackDeviceDialogComponent: MatDialog
              ) {

及其也在我的app.module中：

import { TrackDeviceDialogComponent } from './dialogs/track-device-dialog/track-device-dialog.component';

@NgModule({
   declarations: [
      TrackDeviceDialogComponent,

。。。

   entryComponents: [EditDeviceDialogComponent,
                     DeleteDeviceDialogComponent,
                     LayerControlDialogComponent,
                     HistoricalTrackDialogComponent,
                     TrackDeviceDialogComponent,
                 ]
}

更新：这是该对话框的代码：

import { Aircraft } from '../../shared/aircraft';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { AnimationKeyframesSequenceMetadata } from '@angular/animations';

interface IDeviceNameList {
  id: number;
  deviceName: string;
}

@Component({
  selector: 'app-track-device-dialog',
  templateUrl: './track-device-dialog.component.html',
  styleUrls: ['./track-device-dialog.component.scss', ]
})

export class TrackDeviceDialogComponent implements OnInit {
  deviceForm: FormGroup;
  aircraftData: Aircraft[];
  deviceNames: IDeviceNameList[] = [];
  breakpoint: number;
  dt1: string;
  dt2: string;
  public dateTimeRange: Date[] = [];


  constructor(public dialogRef: MatDialogRef<TrackDeviceDialogComponent>,
              private fb: FormBuilder,
              @Inject(MAT_DIALOG_DATA) public data: any) {

console.log('dialog init');
    // Get the full DB of aircraft data
    this.aircraftData = data;
    // Now filter down to an array of DeviceName's only
    this.buildDeviceList( this.aircraftData );

    // Create a FormControl for each available music preference, initialize them as unchecked, and put them in an array
    const formControls = this.deviceNames.map(control => new FormControl(false));
    // Create a FormControl for the select/unselect all checkbox
    const selectAllControl = new FormControl(false);

    // Simply add the list of FormControls to the FormGroup as a FormArray, add the selectAllControl separetely
    this.deviceForm = this.fb.group({
      deviceNames: new FormArray(formControls),
      selectAll: selectAllControl,
    });
  }

  buildDeviceList( aircraftDB: Aircraft[] ) {
    this.aircraftData.map((obj, indx) => {
      const ac = {id: indx,
        deviceName: obj.DeviceName};
      this.deviceNames.push( ac );
    });
  }
  ngOnInit() {
    this.breakpoint = (window.innerWidth <= 690) ? 1 : 4;
    this.onChanges();
  }

  onChanges(): void {
    // Subscribe to changes on the selectAll checkbox
    this.deviceForm.get('selectAll').valueChanges.subscribe(bool => {
      this.deviceForm
        .get('deviceNames')
        .patchValue(Array(this.deviceNames.length).fill(bool), { emitEvent: false });
    });

    // Subscribe to changes on the music preference checkboxes
    this.deviceForm.get('deviceNames').valueChanges.subscribe(val => {
      const allSelected = val.every(bool => bool);
      if (this.deviceForm.get('selectAll').value !== allSelected) {
        this.deviceForm.get('selectAll').patchValue(allSelected, { emitEvent: false });
      }
    });
  }

  close() {
    // Filter out the unselected ids
    const selectedDevices = this.deviceForm.value.deviceNames
      .map((checked, index) => checked ? this.deviceNames[index].id : null)
      .filter(value => value !== null);
    // Do something with the result
    const selectedIMEIs = selectedDevices.map(( imei, index) => this.aircraftData[index].IMEI);
    const returnData = [ selectedIMEIs, this.dateTimeRange ];
    console.log('returnData: ', returnData);
    this.dialogRef.close( returnData );
  }


}

所以我似乎在需要的地方都声明了它，但仍然出现错误。我该如何追溯到根？

谢谢...

Answer 1

从构造函数中删除trackDeviceDialogComponent

也请查看本指南以获得帮助https://material.angular.io/components/dialog/overview

Answer 2

由于我要注入对话框的数据来自订阅，因此我必须从.subscribe内部调用该对话框，否则由于承诺尚未完成，因此尚未在运行时定义数据。至少我认为这就是原因。

TrackDeviceDialogComponent_Host.ngfactory.js？ [sm]：1错误错误：StaticInjectorError（AppModule）[在

2 个答案: