Question

app.component.html

    {{loading_message}}

app.component.ts

 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     providers: [ApiBridgeService]
 })
 export class AppComponent {
     title = 'app works!';
     loading_message: String;

     constructor() {
         this.loading_message = "Init";
         setInterval(this.change_loading_message, 1000)
    }

     change_loading_message() {
        this.loading_message = "Executing"
     }
}

在html中，它始终显示 Init

预期结果：

它应该在1000ms后显示执行。

Answer 1

如果您正在使用Observables（您应该使用），那么实现这一点非常简单。我建议ngOnInit在组件初始化时启动observable。

 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     providers: [ApiBridgeService]
 })
 export class AppComponent {
     title = 'app works!';
     loading_message: String;

     constructor() {
         this.loading_message = "Init";
     }

     ngOnInit(){
       Observable
           .empty()      //this is optional
           .delay(1000)  //delay for 1000ms
           .subscribe(()=>{  //subscribe to the observables!
              this.loading_message = "Executing"  //change your message!
           }); 
     }
}

要使用.delay()运算符，您需要导入它：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/delay';

请注意，.empty()是可选的。我喜欢使用.empty()来明确指出这个observable不会返回任何东西。如果您使用.empty，则还需要导入它：

import 'rxjs/add/observable/empty`

关于Observables.delay()

的更详细说明

更新后的值未反映在html angular 2中

1 个答案: