时间戳

首页 > 解决方案 > 如何隐藏具有特定条件的组件？

javascript - 如何隐藏具有特定条件的组件？

问题描述

我有一个 Angular 8 应用程序。如果条件为真，我想隐藏一个组件。

条件是这样的：

"status === EcheqSubmissionStatus.EXPIRED"

所以我尝试这样：

EcheqProcessComponent模板：

 <div *ngIf="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED">

    <app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"
      [isbtnDisabled]="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED"
      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"

    ></app-echeq-progress-nav>
  </div>

EcheqProcessComponent ts 文件：

export class EcheqProcessComponent   implements OnInit {
  @ViewChild(EcheqPageComponent, {static: false}) pageComponent: EcheqPageComponent;
  EcheqSubmissionStatus = EcheqSubmissionStatus;
  eCheqLoaded = false;
  eCheqError = false;
  currentEcheqSubmission: EcheqSubmission;
  currentEcheqDefinition: EcheqDefinition;
  currentEcheqPages: Array<EcheqPage>;
  currentEcheqPager: EcheqPager;
  currentEcheqPage: EcheqPage;
  currentEcheqPageIdx: number;
  currentEcheqId: string;
  currentEcheqPath = new Array<number>();
  sending = false;
  submitting = false;

但现在导航按钮总是不可见。什么不是必须的。

这是 EcheqProgressNavComponent 的 ts：

export class EcheqProgressNavComponent extends EcheqElementComponent implements OnInit {
  EcheqSubmissionStatus = EcheqSubmissionStatus;
  @Input() currentPage: number;
  @Input() totalPages: number;
  @Input() conditionals: { isFirst?: boolean; sending?: boolean };

  @Output() previous = new EventEmitter<void>();
  @Output() next = new EventEmitter<void>();
  @Input() isbtnDisabled = true;
  @Input()  showComponent = false;



  ngOnInit() {}
}

是的，我当然也尝试过：

 <div *ngIf="currentEcheqSubmission.status !== EcheqSubmissionStatus.EXPIRED">

    <app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"

      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"

    ></app-echeq-progress-nav>

但随后该组件仍然可见。

标签： javascriptangulartypescript

解决方案

    <div *ngIf="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED">

如果条件为真，此 *ngIf 会显示div。如果你想隐藏它，你需要否定条件。

    <div *ngIf="currentEcheqSubmission.status !== EcheqSubmissionStatus.EXPIRED">

推荐阅读