Angular：单击复选框事件时加载的div未正确显示

Question

当用户单击 Angular 7 应用程序中的复选框时，我试图显示加载 div。我正在尝试使用一个名为 ShowLoader 的布尔标志，但如果我在事件中将其设置为 true，则加载 div 会显示并且不会消失。如果我将标志设置为 false ，则加载 div 永远不会显示。我如何控制这种行为

截图

HTML

<div>
        <input type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked"
            (click)="isInvestedSelected($event)" />
        <label for="chkInvested">Invested</label>

    </div>


    <div class="card scrollClass">
        <div class="card-header panel-heading">
            <span class="left-label" style="font-size: 18px; font-weight: bold; ">Legal Fund Classes</span>
            <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
                <button style="text-align: center; vertical-align:middle; margin-left: 10px"
                    class="btn btn-default pull-right" (click)="openCloneModal()"> <i data-bind="visible: true"
                        class="fa fa-copy"></i> Clone</button>

                <button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"
                    (click)="openLegalFundClassModal()"> <i data-bind="visible: true" class="fa fa-plus-square"></i> Add Class</button>
             </div>
        </div>
         The value of showloader is  {{ShowLoader}}
        <div *ngIf="!LegalFundClasses || !LegalFundClasses.AllTerms || !LegalFundClasses.LegalFundClassColumnNames || ShowLoader" style="padding-top:10px">
                <div class="alert alert-warning" style="text-align:center" role="alert">
                    Loading... Please Wait
                </div>
        </div>

        <div *ngIf="LegalFundClasses && LegalFundClasses.AllTerms && LegalFundClasses.LegalFundClassColumnNames">
            <table class="fundClassesTable table-striped">
                <tr *ngFor="let c of LegalFundClasses.LegalFundClassColumnNames">

                    <ng-container>
                    </ng-container>
               </tr>
        </div>     
    </div>             

组件

public get ShowLoader(): boolean {
    return this._showLoader;
}

public set ShowLoader(value: boolean) {
    this._showLoader = value;

} 

 isInvestedSelected(s) {
        this.ShowLoader = true;
        this.LegalFundInvestedDetailsEvent.emit(s.target.checked);
        this.termsStateService.IsInvested = s.target.checked;

    }

Answer 1

@Tom 在您的组件中尝试以下更改：

• 使用默认布尔值为 false 初始化 ShowLoader

• 现在在 isInvestedSelected 方法中切换 ShowLoader 值

  ShowLoader: boolean = false;
  isInvestedSelected(s) {
  this.ShowLoader = !this.ShowLoader;
    ..........
    ..........
  }