In the standing-orders-details page, I should not display the New Order button, unless I go through the new-order page.

1. The first step, I must hide the New Order button on the standing-orders-details page

在帐篷里,我产生了这样的变量:

isNewOrderVisited: boolean = false;

然后,方法如下:

    goToNewOrder(): void {
        this.isNewOrderVisited = true;
        this.router.navigate([ /orders/newOrder ]);
      }

In the template, the button is presented like this:

    <button *ngIf="isNewOrderVisited" (click)="goToNewOrder()" class="btn btn-primary m-1" type="button">New Order</button>

现在,当我登在<条码>上时,<条码>新令>就被正确地隐藏!

我确实不知道如何这样做?

我认为,问题是在这里?

    newOrderRequest(tokens: SignatureOtpModel | undefined): void {
        if (tokens) {
          this.service.createNewOrder(this.order!, tokens).pipe(
            takeUntil(this.unsubscribe$)
          ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
              this.router.navigate([ /orders/standingOrdersDetails ]);
            } else {
              this.router.navigate([ /orders/error/  + ConfirmOrderTypeEnum.Add +  /  + JSON.stringify(res.RETURNLIST)]);
            }
          });
        }
      }

我与你分享我的整个法典。

ont-orders-details.component.ts

    export class StandingOrdersDetailsComponent implements OnInit {
      private unsubscribe$ = new Subject<void>();
    
      executedOrdersLines: OrderDetails[] = [];
      standingOrdersLines: OrderDetails[] = [];
      standingOrdersLinesAmounts: OrderDetails[] = [];
      step: number = 0;
      numPtf: number = 0;
      intitule: string =   ;
      hasAccess$ = this.service.hasAccess$;
      @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;
    
      isNewOrderVisited: boolean = false;
    
      readonly allSense = SenseEnum;
    
      constructor(
        private service: StandingOrdersDetailsService,
        private modalService: BsModalService,
        private location: Location,
        private router: Router,
    
      ) { }
    
      ngOnInit(): void {
        this.currentPortfolio$.subscribe((portfolio: Portfolio) => {
          
          this.numPtf = portfolio.NUMEROPTF;
          this.intitule = portfolio.NAME;
    
        });
        this.getStandingOrders();
      }
    
      ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
      }
    
      private getStandingOrders(): void {
        this.service.getStandingOrders().pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(res => {
          if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            this.standingOrdersLines = res.ORDDETAIL.filter(x => x.MONT_QTY === 2);
            this.standingOrdersLinesAmounts = res.ORDDETAIL.filter(x => x.MONT_QTY !== 2);
          }
        });
      }
    
    
      cancelStandingOrder(line: OrderDetails): void {
        this.modalService.show(CancelConfirmModalComponent, {
          initialState: {
            orderToCancel: line
          },
          providers: [
            { provide: StandingOrdersDetailsService }
          ]
        });
        this.step = 2;
      }
      
      goBack(): void {
        this.location.back();
      }
    
      goToNewOrder(): void {
        this.isNewOrderVisited = true;
        this.router.navigate([ /orders/newOrder ]);
      }
    
      
    }

new-order.component.ts

    export class NewOrderComponent implements OnInit, OnDestroy {
      @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;
      private unsubscribe$ = new Subject<void>();
      private unsubscribeLoop$ = new Subject<void>();
    
      private isFromSimulation: boolean = false;
    
      readonly allSense = SenseEnum;
      readonly allInstrumentType = InstrumentTypeEnum;
    
      today: Date = new Date();
      maxDate?: Date;
      ptfSelectionner: number = 0;
      intitule: string =   ;
    
      pageTitle: string =   ;
      order?: Order;
    
      againsts: string[] = [];
      infosOrder: string[] = [];
      executionPlaces: { name: string, value: string }[] = [];
    
      instrumentType?: InstrumentTypeEnum;
      titaut?: Titaut;
      devise?: string;
    
      etats?: EtatStatus;
      statusList: AchVdnStatus[] = [];
    
      simulation?: Simulation;
      orderCheckMessages: ApiErrorResponse[] = [];
      value = 0;
    
      constructor(
        private service: NewOrderService,
        private location: Location,
        private activatedRoute: ActivatedRoute,
        private router: Router,
        private createDateTimePipe: CreateDateTimePipe,
      ) { }
    
      ngOnInit(): void {
        this.currentPortfolio$.subscribe((data: Portfolio) => {
          this.intitule = data.NAME;
          this.ptfSelectionner = data.NUMEROPTF;
          
        });
        
        const svm = this.activatedRoute.snapshot.paramMap.get( svm );
        if (!svm) {
          this.goBack();
          return;
        }
    
        this.maxDate = new Date(this.today.getFullYear() + 1, this.today.getMonth(), this.today.getDate());
    
        const validityDate = new Date(new Date().getFullYear(), 11, 31);
        this.order = new Order(+svm, validityDate);
    
        const from = this.activatedRoute.snapshot.paramMap.get( from );
        switch (from) {
          case  simulation : this.updateOrderFromSimulation(); break;
          default: break;
        }
    
        this.getDetails();
      }
    
      private updateOrderFromSimulation(): void {
        this.isFromSimulation = true;
    
        const value = this.activatedRoute.snapshot.paramMap.get( data );
        if (value) {
          const data = JSON.parse(value);
    
          if (data.quantity) {
            this.order!.quantity = parseFloat(data.quantity);
          }
          if (data.limit) {
            this.order!.limit = parseFloat(data.limit);
          }
          if (data.sense) {
            this.order!.sense = data.sense;
          }
          if (data.against) {
            this.order!.against = data.against;
          }
        }
      }
    
      private getDetails(): void {
        this.service.getInstrumentInfo(this.order!.svm).pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(res => {
          if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            this.pageTitle = res.ADVTITRE.BASIQUETITRE.LABEL + " (" + res.ADVTITRE.BASIQUETITRE.PLACELABEL + ")";
            this.devise = res.ADVTITRE.BASIQUETITRE.DEVISE;
            
            this.instrumentType = res.ADVTITRE.BASIQUETITRE.REGR;
            this.executionPlaces = [
              {
                name:  Best Execution ,
                value:  Y 
              },
              {
                name: res.ADVTITRE.BASIQUETITRE.PLACELABEL,
                value:  N 
              },
            ];
    
            concat(
              this.getOrderTICH(),
              this.getValuationAccounts(),
              // this.getInfoOrder(),
              this.getLastOpenDate()
            ).pipe(
              toArray(),
              takeUntil(this.unsubscribe$)
            ).subscribe(() => {
              this.loop();
            });
          }
        });
      }
    
      private getOrderTICH(): Observable<void> {
        return this.service.getOrderTICH(this.order!.svm).pipe(
          map(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
              this.titaut = res.TITAUT;
            }
            return;
          }),
          takeUntil(this.unsubscribe$)
        );
      }
    
    
    
      private getValuationAccounts(): Observable<void> {
        return this.service.getValuationAccounts().pipe(
          map(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
              if (res.PTF.ESPECES.length > 0) {
                const tmpAgainst = [...new Set(res.PTF.ESPECES.map(x => x.COMPTE.CURRENCY))];
                this.againsts = this.clearAgainsts(tmpAgainst);
    
                if (!this.isFromSimulation) {
                  const index = this.againsts.findIndex(x => x === this.devise);
                  if (index !== -1) {
                    this.order!.against = this.againsts[index];
                  }
                }
              }
            }
            return;
          }),
          takeUntil(this.unsubscribe$)
        );
      }
    
      private getLastOpenDate(): Observable<void> {
        return this.service.getLastOpenDate().pipe(
          map(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
              this.order!.validityDate = this.createDateTimePipe.transform({ date: res.TEXTE.COURT, time: null });
            }
            return;
          }),
          takeUntil(this.unsubscribe$)
        );
      }
    
      private clearAgainsts(array: string[]): string[] {
        const indexEur = array.findIndex(x => x ===  EUR );
        if (indexEur !== -1 && indexEur > 0) {
          const tmp = array[indexEur];
          array.splice(indexEur, 1);
          array.unshift(tmp);
        }
        return array;
      }
    
    
      private loop(): void {
        timer(0, 10000).pipe(
          takeUntil(this.unsubscribeLoop$)
        ).subscribe();
      }
    
    
      ngOnDestroy(): void {
        this.resetSubscriptions(false);
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
      }
    
      private resetSubscriptions(recreate: boolean = true): void {
        this.unsubscribeLoop$.next();
        this.unsubscribeLoop$.complete();
        if (recreate) {
          this.unsubscribeLoop$ = new Subject<void>();
        }
      }
    
      checkOrder(): void {
        this.resetSubscriptions();
        this.service.checkOrder(this.order!).pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(res => {
          if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            this.orderCheckMessages = res.RETURNLIST;
            this.newOrderSimulation();
          }
        });
      }
    
      private newOrderSimulation(): void {
        this.service.newOrderSimulation(this.order!).pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(res => {
          if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            this.simulation = res.SIMULATION;
          }
        });
      }
    
      newOrderRequest(tokens: SignatureOtpModel | undefined): void {
        if (tokens) {
          this.service.createNewOrder(this.order!, tokens).pipe(
            takeUntil(this.unsubscribe$)
          ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
              this.router.navigate([ /orders/standingOrdersDetails ]);
            } else {
              this.router.navigate([ /orders/error/  + ConfirmOrderTypeEnum.Add +  /  + JSON.stringify(res.RETURNLIST)]);
            }
          });
        }
      }
    
      goBack(): void {
        if (this.simulation) {
          this.simulation = undefined;
          this.resetSubscriptions();
          this.loop();
        } else {
          this.location.back();
        }
      }
    }