Question

我仍然是Ionic的新手，尤其是Angular。我想用一个从10到0的数字更新textview并每秒更新一次。

在我的课堂上，我获得了一个属性public timeLeft: string = 'Your timer';，该属性与<div>{{timeLeft}}</div>

的html绑定

我尝试使用常规JavaScript setInterval()但是当我尝试使用关键字timeLeft更新属性this时失败，因为this不在同一个范围作为运行setInterval函数时的类。

我读过我应该使用Angular function $interval，因为它可以访问相同的范围或视图，并不完全理解该部分。

我找到了一些代码，说我应该制作一个控制器，它应该包含myApp.controller(function($scope, $interval) {...})

的内容。

在Ionic博客上，我发现一篇帖子提到一些Angular 1概念作为控制器和范围已经出来。

所以我的问题是。如何使用Angular $ interval在Ionic中以一定间隔更新textview？一个完整的代码示例太棒了，因为我在这里真的迷失了。

cli-utils：1.9.2

Ionic CLI：3.9.2

Cordova CLI：6.5.0

ionic app-scripts：2.1.3

Ionic Framework：ionic-angular 3.6.0

Answer 1

您可以在此处使用Observable.timer。请尝试以下代码。

创建一个Observable，它在initialDelay和之后开始发出   在此后的每个时期之后，这些数字会不断增加。

它的间隔时间，但你可以指定何时应该排放   启动。

以下是working Plunker

import {Component} from '@angular/core'
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/observable/timer'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/take'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h1>Countdown timer</h1>
      <h2>{{timeLeft | async}}</h2>
    </div>
  `,
})
export class MyApp {

  timeLeft;
  counter = 10;
  constructor() {

    this.timeLeft = Observable.timer(1000,1000)
      .take(this.counter)
      .map(() => --this.counter)

  }
}

<强>更新

HTML 的

 <h2>{{timeLeft}}</h2>

.TS

 Observable.timer(1000,1000)
      .take(this.counter)
      .map(() => --this.counter).subscribe(val => {
          //you can do transformation here
       }

使用Angular $ interval以一定间隔更新textview

1 个答案: