Angular/NGRX - 防止重复数据

问题描述

所以这是我的问题：

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

端口的变化取决于帐户 ID。

组件显示具有唯一端口的每个用户的不同数据。但事实并非如此，如果它是 closeTrades 之前的数据并且我收到空数组，它将显示旧数据 (different user and different port)。

当我进入组件并从 API 接收数据时，我可以看到数据，这很好，当我返回列表并单击另一个 ID 时，我正在输入组件，如果数组为空我仍然可以看到我的旧数据。但它应该显示空表。

这是带有表格的组件：

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();
    }
  }
}

效果：

@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 });
          })
        );
      })
    );
  });

嗨，谁能帮我解决这个问题：我有一个帐户列表。

第一种情况：当您单击帐户时，它会显示超过 6000 行的数据表。接收大约需要 30 - 40 秒。当我选择一个不同的帐户时，即使我从 API 收到一个空数组，它也会显示 5000 行以前的数据。

第二种情况：我点击帐户和数据，我从 API 收到一个空数组，以前的数据也是空的，或者我选择了这个带有空数组的帐户，它将显示空数组

第三种情况：我选择了一个有数据的帐户。然后我选择了空数组的帐户 - 它会显示以前的帐户数据。然后我将再次选择一个空的帐户数据 - 它会显示一个空表。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular ngrx ngrx-effects