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次单击后关闭对话框，/home路由器链接将我带到该地图。

我的设计在本质上有什么问题吗？

Angular对话框的行为异常

0 个答案: