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

我有一个角度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>

EcheqProcessComponentts文件：

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;

导出类EcheqProcessComponent实现OnInit{
@ViewChild（EcheqPageComponent，{static:false}）pageComponent:EcheqPageComponent；
EcheqSubmissionStatus=EcheqSubmissionStatus；
eCheqLoaded=错误；
eCheqError=错误；
当前EcheqSubmission:EcheqSubmission；
当前EcheqDefinition:EcheqDefinition；
当前设备：数组；
当前EcheqPager：EcheqPager；
当前电子设备页面：电子设备页面；
currentEcheqPageIdx：编号；
currentEcheqId：字符串；
currentEcheqPath=新数组（）；
发送=假；
提交=假；

但是现在导航按钮总是看不见的，不一定是

这是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() {}
}

导出类EcheqProgressNavComponent扩展EcheqElementComponent实现OnInit{
EcheqSubmissionStatus=EcheqSubmissionStatus；
@输入（）当前页面：编号；
@Input（）总页数：页数；
@Input（）条件：{isFirst？：boolean；sending？：boolean}；
@Output（）previous=新的EventEmitter（）；
@Output（）next=neweventemitter（）；
@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>

但是组件仍然可见。

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

如果条件为true，则此*ngIf显示div。如果要隐藏它，则需要对条件求反

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

模板中有

currentEcheqSubmission

，但TS中没有此类变量。是的，另一方面它是更新的，如果他只是想隐藏它，他可以使用[hidden]属性。