ngOnDestroy是否可以在条件下触发？选中复选框时，即使重新加载网格后，它仍会记住我以前的选择

如何解决ngOnDestroy是否可以在条件下触发？选中复选框时，即使重新加载网格后，它仍会记住我以前的选择

I have these two grid. The bottom one is based on the top one:

下部网格中的每个项目都与从顶部网格中选择的程序名称和工具号相关。在这张照片中，因为我已经从下部网格中选择了一个项目，所以启用了“删除工具更改”按钮。

现在，如果我选择了不同的程序名称和工具号（例如：从顶部网格的＃6到1），并从底部网格选择了另一个项目（例如：1＃），则会突然禁用“删除工具更改”按钮。

The two grid after choosing a different item from upper grid

这是我用于上部网格组件的代码。

discord.utils.get(ctx.guild.roles,id=123456789)

这是我的上层网格HTML：

  columns: ColumnDef[] = [
    { field: 'programName',name: 'Program Name',editable: false,filterField: true,width: '12em',tooltip: 'Read Only' },{ field: 'toolnoprefix',name: 'Tool #(Prefix)',tooltip: 'First 8 characters of the Tool Tip - Read Only' },{ field: 'toolNoSuffix',name: '(Suffix)',width: '8em' },{ field: 'toolName',name: 'Tool Name',width: '24em' },{ field: 'tlLeadFileName',name: 'Tool File Name' },{ field: 'typeName',name: 'Fixture Type',width: '12em' },{field: 'engineerId',name: 'MSE',type: 'dropdown',optionsList: this.engineers,optionsListField: 'id',optionsListName: 'lastFirstName',width: '10em'},{ field: 'userSource',name: 'User Source',{ field: 'tprCreateDate',name: 'Date Created',type: 'date',];
hasLoaded = false;
resourced = false;
selectedEcmTool$: BehaviorSubject<any> = new BehaviorSubject(null);

@ViewChild('tools') dataTable: DataTableComponent;

constructor(
    private router: Router,private cgpAlertDialogService: CgpAlertDialogService,private ecmService: EcmService,private dialog: MatDialog,private readonly toastr: ToastrService
) {}

ngOnInit() {
    if (!this.selectionCriteria) {
        this._init = this.cgpAlertDialogService.showAlertDialog({
            title: 'Invalid Selection Criteria',message: 'A selection criteria has not been selected. Redirecting back to the main page.',alert: cgpAlertTypes.warning,closeLabel: 'OK'
        }).afterClosed().subscribe(
            () => this.router.navigate([''])
        );
    }

    if (this.router.url === '/tprecm/ecm/re-source') {
        this.resourced = true;
        this.columns.forEach(val => val.editable = false);
    }
    this.updateNameSources();
    this.hasLoaded = true;
}

ngOnDestroy() {
    if (this._init) {
        this._init.unsubscribe();
    }
}

loadECMs() {
    this.loading = true;

    const body = {
        ...this.selectionCriteria,filterColumn: this._currentFilters,reSourced: +this.resourced,};

    this.ecmService.getAllTools(body,this.pageOptions)
        .pipe(
            filter(Boolean),finalize(() => this.loading = false)
        ).subscribe((res: { totalCount: number,data: any[] }) => {
            this.total = res.totalCount;
            this.data = res.data;
            if (this.data.length >= 1) {
                this.dataTable.selections = [this.data[0]];
                this.selectedEcmTool$.next(this.data[0]);
            }

        });
}
 onSelect(selectedEcmTool) {
      this.selectedEcmTool$.next(selectedEcmTool);
   }

这是我的下部网格组件代码：

<cgp-app-card titleText="View/Update ECM" showFullScreenToggle="true" [showBackButton]="true"
   [onBackButtonClicked]="onBackButtonClicked">
   <div *ngIf="hasLoaded">
      <data-table #tools [data]="data" [columns]="columns" (lazyLoad)="onLazyLoad($event)" [lazy]="true" [paging]="true"
         [pageSize]="pageOptions.size" [totalRecords]="total" [loading]="loading" [filterable]="true" (edit)="updatetool($event)"
         (select)="onSelect($event)">
         <ng-container actionStart>
            <button mat-button (keypress)="onEcmNecReportsClick()" (click)="onEcmNecReportsClick()">Nec Reports</button>
            <button mat-button (keypress)="onEcmReportsClick()" (click)="onEcmReportsClick()">ECM Reports</button>
            <button mat-button (keypress)="onToolPartRelationshipClick()" (click)="onToolPartRelationshipClick()">Edit
               Tool/Part Relationship</button>
            <button mat-button (keypress)="onEcmPartsClick()" (click)="onEcmPartsClick()">Parts</button>
            <button mat-button [disabled]="this.resourced" (keypress)="onEcmPartsuploadClick()"
               (click)="onEcmPartsuploadClick()">Upload Parts from a File</button>
         </ng-container>
         <ng-container actionEnd>
            <button mat-button>Change Log</button>
         </ng-container>
      </data-table>
      <ecm-tool-change [resourced]="this.resourced" [selectedEcmTool$]="selectedEcmTool$"></ecm-tool-change>
   </div>
</cgp-app-card>

这是我的下部网格HTML代码：

@input() selectedEcmTool$: BehaviorSubject<any>;

   @ViewChild('toolChangeTable') toolChangeTable: DataTableComponent;

    constructor(
        private readonly ecmToolChangeService: EcmToolChangeService,private readonly ecmService: EcmService,private readonly dialog: MatDialog,private readonly toastr: ToastrService,private readonly confirmation: CgpConfirmationDialogService,private readonly cgpAlertDialogService: CgpAlertDialogService,) {
    }

   onSelect(selectedEcmTool,toolChangeTable: DataTableComponent) {
      if (selectedEcmTool.dtShippedToDatabank) {
         const selected = toolChangeTable.selections;
         const index = selected.findindex(s => s.toolId === selectedEcmTool.toolId);
         if (index !== -1) {
            toolChangeTable.selections.splice(index,1);
         }
         this.toastr.error('You cannot check this Tool Change after you have entered the Shipped to Databank Date ');
      }
   }

   onUnSelect(dataItem) {
      return dataItem;
   }


   ngOnInit() {
      if (this.resourced) {
         this.columns.forEach((val) => val.editable = false);
      }

      this.selectedEcmTool$.subscribe(
         (selectedEcmTool) => {
            if (selectedEcmTool) {
               const toolId = selectedEcmTool.toolId;
               this.updateSelectedEcmTool(toolId);
               this.updateDesignSources();
            } else {
               this.data = [];
            }
         }
      );
   }

   ngOnDestroy() {
      if (this.selectedEcmTool$) { this.selectedEcmTool$.unsubscribe(); }
   }

   onLazyLoad(event: LazyLoadEvent) {
      this.pageOptions.order = event.sortOrder === 1 ? 'asc' : 'desc';
      this.pageOptions.size = event.rows;
      this.pageOptions.sort = event.sortField;
      this.pageOptions.page = event.first / this.pageOptions.size;
      this.updateSelectedEcmTool(this.toolId);
   }
    clearSelections() {
      this.toolChangeTable.selections = [];
   }

   updateSelectedEcmTool(toolId) {
      if (!toolId) {
         return;
      }

      this.toolId = toolId;
      this.loading = true;
      this.ecmToolChangeService.getToolChange(toolId,this.pageOptions)
         .pipe(filter(Boolean))
         .subscribe({
            next: (res: { totalCount: number,data: any[] }) => {
               this.total = res ? res.totalCount : 0;
               this.data = res ? res.data : [];
            },complete: () => this.loading = false
         });
   }
 
updatetoolChange(event: any) {
      const body = event.data;
      body.sourceName = undefined;
      this.ecmToolChangeService.updatetoolChange(body)
         .subscribe();
   }

如何编写函数或触发ngOnDestroy，以使其不再记住先前选择的行。

解决方法

为什么不只从this.selectedEcmTool $ .subscribe（）中调用clearSelections（）？

每次可观察到的selectedEcmTool $获得新值时，下部网格将清除其选择。

还是我错过了什么？

ngOnInit() {
  if (this.resourced) {
     this.columns.forEach((val) => val.editable = false);
  }

  this.selectedEcmTool$.subscribe(
     //clear selections whenever the tool changes
     this.clearSelections();
     
     (selectedEcmTool) => {
        if (selectedEcmTool) {
           const toolId = selectedEcmTool.toolId;
           this.updateSelectedEcmTool(toolId);
           this.updateDesignSources();
        } else {
           this.data = [];
        }
     }
  );

}

,

我通过添加以下内容对其进行了修复：

  get hasSelectedSingleCheck(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => row.toolId === this.selectedToolId).length === 1;
   }

并在html中添加此检查以禁用按钮（如果为true）。