如何解决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 举报,一经查实,本站将立刻删除。