Question

我想根据api调用的响应状态加载div部分，

我有一个搜索框，输入值并单击，如果为true 返回，然后打开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分配一个ID，以在组件上引用它

    <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");
}

}
}

如何根据我的api响应返回的布尔值显示和隐藏div部分

1 个答案: