Как показать и скрыть раздел div на основе логического значения, полученного из моего ответа API

Question

Я хочу загрузить раздел div, основываясь на статусе ответа от вызова API,

• У меня есть окно поиска, при вводе значения и нажмите, если истина возвращается, тогда раздел div открыт

• Если false, то секция остается закрытой или должна закрыться.

  APPROACH TRIED - определил переменную и использовал ее в качестве условия в div раздел

ПРОБЛЕМА - отлично работает при втором щелчке, но при первом щелчке поиска никогда не загружает раздел, даже если возвращаемое значение равно true, вместо этого при втором щелчке работает.

Ниже приведен код компонента

export class EndorsementComponent  implements OnInit{
  fetch_endorse: any;

    onSubmitPolNo() {
          let formValueE: any = {
            request_param : this.endorsSearchForm.value.searchViaPFEG,
          }  
          this.endorsService.getEndorsePolicy(formValueE)
            .pipe()
            .subscribe(endorsearchdata => {
              this.displayEndorseSearch(endorsearchdata),
                console.log('endorsearchdata: ', endorsearchdata); //
              (error: any) => this.errorMessage = <any>error
            }
            )
        }
        displayEndorseSearch(endorsearchdata): void {
          this.endorsearchdata = endorsearchdata;
          console.log('endorsearchdata: ', endorsearchdata); //
          if (this.endorsearchdata.status == false) {
            this.fetch_endorse = false;
            const message = this.endorsSearchForm.value.searchViaPFEG + `  Does not exist.`;
            this.layoutUtilsService.showActionNotification(message, MessageType.Update, 10000, true, false);

          }
          else {
            this.fetch_endorse = true;
            console.log(this.endorsearchdata.status)
          }

И ниже HTML

    <div *ngIf ="fetch_endorse" class="m-portlet">
  <form class="m-form m-form--fit m-form--group-seperator" novalidate [formGroup]="endorsForm" >
    <div class="m-portlet__head">
      <div class="m-portlet__head-caption">
        <div class="m-portlet__head-title">
          <span class="m-portlet__head-icon m--hide">
            <i class="la la-gear"></i>
          </span>
          <h3 class="m-portlet__head-text">
            Policy Detail
          </h3>
        </div>
      </div>
      <div class="m-portlet__head-caption">
        <div class="m-portlet__head-title">
          <h3 class="m-portlet__head-text w-100">
            Endorsement Status:
          </h3>
          <mat-form-field class="no-line in-line example-full-width flex:1">
            <h3>
            <input matInput formControlName ="endr_status">
          </h3>
          </mat-form-field>
        </div>
      </div>
    </div>
    <div class="m-portlet__body">
        <div class="m-form__section m-form__section--first">
            <div class="form-group m-form__group row">
        <label class="col-lg-1.5 col-form-label">Policy Number:</label>
        <div class="col-lg-3">
          <mat-form-field class="example-full-width">
            <input matInput formControlName ="policy_number">
          </mat-form-field>
        </div>
        <label class="col-lg-1.5 col-form-label">Insured Name:</label>
        <div class="col-lg-3">
          <mat-form-field class="example-full-width">
            <input matInput formControlName ="insured_name">
          </mat-form-field>
        </div>

Answer 1

Посредством использования css для скрытия и отображения добавлен следующий стиль к css

  ::ng-deep .show {
   opacity: 1;
   transition: opacity 1s;
}

::ng-deep .hide {
   opacity: 0;
   transition: opacity 1s;
}

HTML - Дайте идентификатор моему Div для ссылки на него в компоненте

    <div #myDiv  class="m-portlet">
  <form class="m-form m-form--fit m-form--group-seperator" novalidate [formGroup]="endorsForm" >
    <div class="m-portlet__head">
      <div class="m-portlet__head-caption">
        <div class="m-portlet__head-title">
          <span class="m-portlet__head-icon m--hide">
            <i class="la la-gear"></i>
          </span>
          <h3 class="m-portlet__head-text">
            Calculate Detail
          </h3>
        </div>
      </div>

На компонент добавлено это условие

export class EndComponent implements OnInit {
  public fetch_endorse: boolean = false;
  @ViewChild("myDiv") myDiv;

  ngOnInit() {
 this.fetch_endorse = false;
    this.myDiv.nativeElement.classList.add("hide");
    this.myDiv.nativeElement.classList.remove("show");
}

functionTest(){
    this.fetch_endorse = this.endorsearchdata.status;

    if (!this.fetch_endorse) {
      this.myDiv.nativeElement.classList.add("hide");
      this.myDiv.nativeElement.classList.remove("show");
}
  else {
      //this.fetch_endorse = true;
      this.myDiv.nativeElement.classList.add("show");
      this.myDiv.nativeElement.classList.remove("hide");
}

}
}