угловой загрузчик оставляет цвет подсветки

#javascript #angular #typescript #angular-material #dialog

Вопрос:

Почему после закрытия загрузчика он оставляет цвет подсветки, как вы можете видеть на скриншоте ниже ?

Когда страница инициализируется, я хотел сначала получить общее количество сделок, и пока она получает количество, она должна показывать загрузчик и должна прекратить загрузку или запустить загрузчик закрытия, если он получит результат getCount.

Прямо сейчас , как вы можете видеть на скриншоте после завершения загрузки, на вкладке есть цветовое выделение или выделение ошибки, оно не должно отображаться после завершения загрузки загрузчика.

Прямо сейчас я должен сначала нажать за пределами вкладки, прежде чем исчезнет цветовая подсветка.

введите описание изображения здесь

#код

 export class DealsTransactionComponent implements OnInit, OnChanges {  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;  transactionSubscripion: Subscription;  tableOptions: any;  @Input() transaction: any;  @ViewChild('table') tableCompoonent: TableMultiSortComponent;   constructor(    ) {}  ngOnInit(): void {   this.showLoader('Loading list of deals');   }   ngOnChanges(changes: SimpleChanges): void {  this.subscription = this.dealTransactionService.dataSubject.subscribe((data: any) =gt; {  if(!data.actionName) {  this.refreshDealDetailsPage(data);  }  });  }  ngOnDestroy(): void {  this.subscription?.unsubscribe();  }  showLoader(dialogMsg : string) {  LOADER_DIALOG_CONFIG.data = { text: dialogMsg };  this.dialog.open(LoaderDialogComponent, LOADER_DIALOG_CONFIG);  }  closeLoader() {  this.dialog.closeAll();  }  private getCount(item: any) {  let status = item;  return this.dealService.getCount(  this.accountId,  this.transaction.id,  status  )  }   getAllDealsCount() {  this.isInProgress = true;  const observableResult = zip(  this.getCount('ForApproval'),  this.getCount('Draft')  );   observableResult.subscribe((res: any[]) =gt; {  this.isInProgress = false;  this.closeLoader();  this.forApprovalResponse = res[0]?.data;  this.hasPendingAprroval = res[0].data gt; 0;  const draftResponse = res[1]?.data;    this.totalDeals = this.forApprovalResponse   draftResponse;    if (this.forApprovalResponse amp;amp; this.forApprovalResponse gt; 0) {  this.tableOptions.columns  .filter(column =gt; column.actions)  .flatMap(column =gt; column.actions)  .filter(action =gt; action.name === 'For Approval')  .forEach(action =gt; (action.disabled = true))   }  });   } }