Question

我最近开始学习Angular2概念，所以我有一个问题试图了解如何更改布尔值＆＃39; loading＆＃39;使用.then完成事务后ngOnOnit中的值，我的组件正在完美地从服务中检索数据。如果有人能帮助我，那就太好了。

基本上我想要做的是将值加载更改为＆＃39; false＆＃39;并隐藏'md-progress-circle＆＃39;完成周期后。

这是我的HTML。

<span *ngIf="loading">
 <md-progress-circle mode="indeterminate"></md-progress-circle>
</span>

这是我的组件类。



    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { DemographicsService } from './app.service-http';
    import { Demographics } from './demographics';

    @Component({
      selector: 'app-data',
      templateUrl: 'app/app.data.html',
        styleUrls: ['app/app.data.css']
    })
    export class AppData implements OnInit {

      demographics: Demographics[] = [];
      loading: boolean = false;

      constructor(
        private router: Router,
        private demographicsService: DemographicsService) { 
      }

      ngOnInit(): void {
        this.loading = true;
        this.demographicsService.getDemographics()
          .then(demographics => this.demographics = demographics);
      }
    }

在.then

中添加类似的内容

this.loader = false

Answer 1

.then的第一个参数是结果到达后执行的函数。只需添加另一行代码即可完成所需操作：

this.demographicsService.getDemographics().then(
    demographics => {
        this.demographics = demographics;
        this.loading = false;
    }
);

要注意的一件事：如果承诺被拒绝或发生异常，loading=false行将永远不会被执行，应用程序将保持无限加载状态。

要解决此问题，您可能需要在.finally块中设置加载。无论如何都会执行此块：

this.demographicsService.getDemographics().then(
    demographics => this.demographics = demographics;
).catch( 
    error => { /* TODO: handle the error*/ }
).finally( 
    ()=>this.loading=false 
);

更新ngOnOnit中的变量Angular2

1 个答案: