Странное поведение с угловым диалогом

Question

В моем angular app есть диалог, который работает, как и ожидалось, при первом использовании.Он содержит несколько флажков, позволяющих пользователю выбирать устройства для отслеживания приложения.Тем не менее, после второго раза, когда я его отображаю, нажатие на кнопку закрытия отправляет данные в приложение, но диалоговое окно не закрывается.Я должен снова нажать Закрыть.Затем, если я снова открою диалоговое окно, мне придется нажать 3 раза, чтобы закрыть диалоговое окно.Вот где диалоговое окно открывается в вызывающем компоненте:

     ngOnInit() {
          this.className = this.constructor.toString().match(/\w+/g)[1];


     // start the spinner
     this.loadingSubject.next(true);
     /**
      * List of all devices is coming from an observable managed by
      * the DeviceManagerService. We subscribe (block) on that data
      * being returned, we can't build up the dialog of checkbox id's
      * until we have that data.
      */
     this.deviceManagerService.getAllDevices().subscribe((devices) => {
       this.dataSource = devices;
       console.log('devices are: ', this.dataSource);
       this.loadingSubject.next(false);
       this.dialogConfig.disableClose = true;
       this.dialogConfig.autoFocus = true;

       this.dialogConfig.data = this.dataSource;

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

       dialogRef.afterClosed().subscribe(result => {
           this.devicesToTrack = result[0];
           this.devicesToTrackService.publishIMEIs(this.devicesToTrack);
           console.log('IMEIs to track from dialog:', this.devicesToTrack);
       });

     });

   }

Я не могу отобразить диалоговое окно, пока не получу данные от наблюдаемой за службой диспетчера устройств, поэтому я встроил ее вподписываться.Ничего необычного в коде для закрытия диалогового окна:

  close() {
    // Filter out the unselected ids
    const selectedDevices = [];
    /**
     * Loop thru array of deviceNames looking for every item that has its checkbox
     * checked. For each check, grab the imei associated with that object and push
     * it into the selected devices array which is what will be returned from
     * this to the caller, tracking.component.
     */
    this.deviceForm.value.deviceNames
      .map((checked, index) =>  {
        checked ? selectedDevices.push(this.deviceNames[index].imei) : null;
      })
      .filter(value => value !== null);
    const returnData = [ selectedDevices, this.dateTimeRange ];
    this.dialogRef.close( returnData );
  }

и ничего особенного с помощью кнопки html:

   <button class="mat-raised-button " routerLink="/home" (click)="close()">submit</button>

Так что происходит, когда я открываю диалоговое окно в 3-й раз?происходит долгая задержка при загрузке, затем диалоговое окно отображается на темно-сером фоне.Я нажимаю «отправить» в первый раз, и темно-серый уходит, показывая карту внизу, все еще с легкой штриховкой поверх нее, затем после 3-го щелчка диалоговое окно закрывается и /home routerlink выводит меня на карту.

Есть ли у меня что-то принципиально не так с моим дизайном здесь?