Angular/NGRX - prevent duplicate data

so this is my issue:

 this.store.dispatch(loadCloseTradesByPort({ port: tradingAccountData.settings.port }));

Port is changing depends on the account id.

• Component is showing different data for each user that has an unique port. but this is not the case, if it was data before in closeTrades and i receive empty array it will show an old data (different user and different port).

When i'm entering to component and i recive data from the API i can see the data and this is fine, when i'm going back to the list and click on another id i'm entering the component and if the array is empty i still can see my old data. but it supposed to show empty table.

This is the component with the table:

import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewChild,
} from "@angular/core";
import { MatPaginator } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import { MT4Trades } from "../../../core/infrastructures/mt4-trades";
import { select, Store } from "@ngrx/store";
import { AppState } from "app/store/app.state";
import { loadCloseTradesByPort } from "../store/trades/trades.actions";
import { Observable, Subscription } from "rxjs";
import {
  getCloseTrades,
  selectAllCloseTrades,
} from "../store/transaction.main.selector";
import { getTrades } from "../store/trades/trades.selector";
import { getTradingAccountById } from "app/pages/trading-accounts/store/tradingAccount.selector";
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-close-trades",
  templateUrl: "./close-trades.component.html",
  styleUrls: ["./close-trades.component.css"],
})
export class CloseTradesComponent implements AfterViewInit, OnDestroy {
  displayedColumns: string[] = [
    "OpenTime",
    "Symbol",
    "Ticket",
    "Operation",
    "Lots",
    "OpenPrice",
    "CloseTime",
    "ClosePrice",
    "Swap",
    "Profit",
  ];
  dataSource: MatTableDataSource<MT4Trades>;
  tradingAccount: Subscription;
  closeTrades: Subscription;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(
    private changeDetector : ChangeDetectorRef,
    private store: Store<AppState>
  ) {}
  ngOnDestroy(): void {
    if(this.tradingAccount) this.tradingAccount.unsubscribe();
    if(this.closeTrades) this.closeTrades.unsubscribe();

  }

  ngOnInit(): void {
    debugger;
    this.tradingAccount = this.store.select(getTradingAccountById).subscribe((tradingAccountData) => {
      debugger
      if(tradingAccountData)
      this.store.dispatch(loadCloseTradesByPort({ port: tradingAccountData.settings.port }));
      this.closeTrades = this.store.pipe(select(selectAllCloseTrades)).subscribe((data) => {
        debugger;
        if (data) {
          // this.dataSource.data = data as any;
          this.dataSource = new MatTableDataSource(data as  any);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
        }
      });
    });;
  }

  ngAfterViewChecked(){
    this.changeDetector.detectChanges();
  }

  ngAfterViewInit() {

  }

  trackBy = (_index: number, item: any) => {
    return item.Ticket;
  };

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

Effects:

@Injectable()
export class TransactionsEffects {
  constructor(
    private actions$: Actions,
    private transactionsService: TransactionsService,
    private authService: AuthService,
    private router: Router
  ) {}
  loadTransactionsByUserId$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(loadTransactionsByUserId),
      mergeMap((action) => {
        debugger
        return this.transactionsService.getAllTransactionsByTAId(action.id).pipe(
          map((transactions) => {
            return loadTransactionsSuccess({ transactions });
          })
        );
      })
    );
  });

Hi, who can help me please with this issue: I have a list of accounts.

First case: when you click on the account it will show data with over 6 thousand rows table. it takes about 30 - 40 seconds to receive. When i select a different account it will show previous data with 5 thousand rows even if the i receive an empty array from API.

Second case: I click on account and the data i receive an empty array from API and the previous data was empty as well or i have select this account with empty array it will show empty array

Third case: I have selected an account with data. Then i have select account with empty array - it will show previous account data. Then i will select an empty account data again - it will show an empty table.