Angular ChangeDetectorRef 渲染實時數據

Question

我正在嘗試獲取有關 angular 基本組件的實時數據。

我期望的是：HTML 渲染每 1 秒自動遞增一次（即：0、1、2、3、4、5..等）

我得到了什么：HTML 渲染：0 然后 1。（增加一次然后停止）

Stackblitz url for demonstration (appologize if url not valid, first time sharing my code): https://stackblitz.com/edit/angular-9-starter-material-jdjcjp?file=src%2Fapp%2Fapp.component.ts

我的代碼：

import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
} from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { Observable, BehaviorSubject, combineLatest, timer } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  item = 0;

  ngOnInit(): void {
    timer(1000)
      .pipe(
        tap(() => {
          this.item++;
          this.cdr.markForCheck();
        })
      )
      .subscribe();
  }
}

Answer 1

使用 RxJs間隔代替定時器

interval(1000)  // emit every 1000 milliseconds
      .pipe(
        tap(() => {
          this.item++;
        })
      )
      .subscribe();

Answer 2

找到了：

ngOnInit() {
return setInterval(() => {
      this.item++;
      this.cdr.markForCheck();
}, 1000);

}