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;
  ..........
  ..........
}

角度：单击复选框事件后，加载div无法正确显示

1 个答案: