Как скрыть компонент с определенным условием?

Question

У меня есть приложение 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:

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>

Но тогда компонент все еще виден.

Answer 1

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

Этот * ngIf показывает div, если условие выполняется. Если вы хотите скрыть это, вы должны отменить условие.

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