我正在尝试在数据完全加载时在我的应用程序上显示一个微调器。所以我所做的是订阅Web服务调用。我有一个名为IsBusy的变量,它在我进行服务调用之前设置为True。完成Web服务调用后,我将IsBusy设置为false。
在我的HTML中,我使用这个IsBusy来显示/隐藏我的微调器。现在它根本不显示微调器。下面是我的html和打字稿代码。
?>
<fieldset>
<legend><h2>Events</h2></legend>
<form name="search" method="post" action="<?=$PHP_SELF?>">
<tr> <th> <td>
<fieldset>
<legend>Find all events</legend>
<input type="radio" name="events" <?php if (isset($events) &&
$events=="all") echo "checked";?>value="all"> Display all events
</fieldset>
<fieldset>
<legend>Find events by date</legend>
<input type="date" name="date" min="<?php echo date("Y-m-d");?>"
max="2025-01-01" value="<?php echo date("Y-m-d");?>">
</fieldset>
<fieldset>
<legend>Find events by keywords</legend>
<input type="hidden" placeholder='Search by keyword'name="searching"
value="yes" />
Search for: <input type="text" name="find" /> in
<Select NAME="field">
<Option VALUE="eventName">Event Name</option>
<Option VALUE="eventLocation">Event Location</option>
</Select>
<input type="hidden" name="searching" value="yes" />
<input type="submit" name="submit" value="submit" />
</form>
</fieldset>
<button name="submit" value="submit" type="submit" class="button
expanded">Submit </button>
<button type="reset" value="Clear"class="button expanded">
Clear</button>
</fieldset>
</select> </td></tr>
<?php
//include files
include 'footer/footer.php';
?>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
</script>
</body>
我在发布之前进行了研究并在某处读到了我可能需要从&#39; @ angular / core&#39;导入ChangeDetectorRef。我这样做并在构造函数中将ChangeDetectorRef实例化为cd。
<div id="surgeryRequestFormContainer" class="container-fluid">
<div *ngIf="isBusy" class="loading">
<img src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif" />
</div>
<div class="row">
<div class="form-group col-sm-12">
<button kendoButton (click)="btnPrevious()">Previous</button>
<button kendoButton (click)="btnNext()">Next</button>
<button kendoButton (click)="btnSaveForLater()">Save For Later</button>
</div>
</div>
我不确定我需要做什么才能显示/隐藏我的微调器div标签。
答案 0 :(得分:2)
发生的事情是Observable链正在进行异步调用。所以基本上代码执行不会等待,并且在行this.isBusy = false
之后几乎立即调用链后调用this.isBusy = true
。之后才能完成对服务的调用。但是,到目前为止,你的微调器已经关闭了。
相反,您应该做的是将该调用移到您的可观察链中。
this.isBusy = true;
this.route.params
.switchMap((params: Params) => this._RequestFormService.getRequestById(+params['id']))
.subscribe(
data => {
this.Model = data;
this.isBusy = false;
},
error => console.log("Error", error),
() => this.isBusy = false);
如果您熟悉setTimeout
,那么这基本上就是您对代码所做的工作。
console.log('setting the value to true');
setTimeout(function() {
console.log('setting the value to false');
}, 1000);
console.log('setting the value to false');
不要添加任何混淆,但Observable本身并不是异步的。而且我不相信&#34;最后&#34; subscribe
中的回调将在此处调用,因为Observable永远不会结束&#34;。