按下確認按鈕后，模態應該消失

我輸入一個錢包號碼：

在此處輸入影像描述

我點擊按鈕

在此處輸入影像描述

用戶必須在頁面上被引導/portfolio/stocks

除此之外，總是顯示模態。

在此處輸入影像描述

select-portfolio-result-modal.component.html

<ng-container>
   <div >
      <h4  id="modal-title">
         Confirmation de la sélection
      </h4>
      <button type="button"  aria-label="Close button" aria-describedby="modal-title" (click)="close()">
      </button>
   </div>
   <div >
      <ng-container *ngIf="isLoading">
         <div >
            <div  role="status"></div>
         </div>
      </ng-container>
      <ng-container *ngIf="!isLoading">
         <div >
            <table >
               <thead>
                  <tr>
                     <th scope="col">
                        <!-- Portefeuille -->
                        Portefeuille
                     </th>
                     <th scope="col">
                        <!-- Intitulé -->
                        Intitulé
                     </th>
                  </tr>
               </thead>
               <tbody>
                  <tr *ngFor="let portfolio of portfolios; let i = index">
                     <td style="width: 30%">
                        <a (click)="selectPortfolio(portfolio)"  role="button">
                        {{ portfolio.REFERENCE }}
                        </a>
                     </td>
                     <td style="width: 70%">
                        {{ portfolio.COIN_LABEL }} {{ portfolio.INTITULE1 }} {{ portfolio.INTITULE2 }}
                     </td>
                  </tr>
                  <tr *ngIf="!portfolios.length && errorMessage">
                     <td colspan="4">{{ errorMessage }}</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </ng-container>
      <div >
         <button type="button"  (click)="confirm()">
         Confirm
         </button>
      </div>
   </div>
</ng-container>

選擇組合結果-modal.component.ts

問題可能是下面的 confirm() 方法？

@Component({
  selector: 'app-select-portfolio-result-modal',
  templateUrl: './select-portfolio-result-modal.component.html',
  styleUrls: ['./select-portfolio-result-modal.component.scss']
})
export class SelectPortfolioResultModalComponent {

  constructor(private readonly router: Router) {}

  @Input() isLoading: boolean = false;

  @Output() selectedPortfolio = new EventEmitter<SelectPortfolio | undefined>();

  @Input() portfolios: SelectPortfolio[] = [];
  @Input() errorMessage?: string;

  selectPortfolio(ptf: SelectPortfolio): void {
    this.selectedPortfolio.emit(ptf);
  }

  close(): void {
    this.selectedPortfolio.emit(undefined);
  }

  
confirm(){
  this.router.navigateByUrl('/portfolio/select-portfolio'); 
 }

select-portfolio.component (c'est le TS, de la page qui doit être lancé après avoir entrer le numéro de wallet )

請您認為您的 TS 檔案正確嗎？

export class SelectPortfolioComponent implements OnDestroy {
  private unsubscribe$ = new Subject<void>();
  search = new SelectPortfolioModel();

  constructor(private service: SelectPortfolioService, private modalService: BsModalService, private router: Router) { }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  submit(): void {
    const modalRef = this.modalService.show(SelectPortfolioResultModalComponent, {
      ...NOT_CLOSABLE_MODAL_OPTIONS,
      class: 'modal-dialog-centered modal-lg',
      ariaLabelledBy: 'modal-error-title',
      initialState: {
        isLoading: true
      }
    });

    modalRef.content!.selectedPortfolio.pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe((val: SelectPortfolio | undefined) => {
      if (val) {
        this.service.selectPortfolio(val).pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(() => {
          this.router.navigate(['']);
        });
      }
      modalRef?.hide();
    });

    this.service.getPortfolios(this.search).pipe(
      takeUntil(modalRef.content!.selectedPortfolio)
    ).subscribe(res => {
      if (modalRef) {
        modalRef.content!.portfolios = res.PTF;
        const noResults = res.RETURNLIST.find(item => item.CODE === ApiResponseCodeEnum.Sch00);
        if (noResults) {
          modalRef.content!.errorMessage = noResults.TEXTE
        }
        modalRef.content!.isLoading = false;
      }
    });
  }
}

uj5u.com熱心網友回復：

您需要在導航之前關閉模式。

我看到您正在使用 ngx-bootstrap 所以，您需要在組件中注入 bsModalService

constructor(private readonly router: Router,
            private bsModalRef: BsModalRef){}

和

confirm(){
  this.bsModalRef.hide()
  this.router.navigateByUrl('/portfolio/select-portfolio'); 
 }

NOTE1：總是很高興幫助您告訴我們您正在使用什么庫

注意 2：在其他模式中，例如 ng-bootstrap，您使用 modalRef 有一個屬性“結果”，它是一個承諾，并且在您進行導航時正在使用這個承諾

uj5u.com熱心網友回復：

你應該試試這個，

在你的確認功能中

this.modalService.dismiss();

要么

this.modalService.dismissAll();

標籤：有角度的

上一篇：Angular-TypeError：無法讀取未定義的屬性-獲取JSON資料

下一篇：為什么切換復選框回傳false？