Question

我正在尝试在数据完全加载时在我的应用程序上显示一个微调器。所以我所做的是订阅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标签。

Answer 1

发生的事情是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;。

Angular2 - NgIf无法从subscribe访问我的变量

1 个答案: