Angular ChangeDetectorRef渲染实时数据

Question

我正在尝试获取有关角度基本组件的实时数据。

我的期望：HTML呈现每1秒自动递增一次(即：0、1、2、3、4、5等(

我得到的：HTML呈现：0然后是1。(增加一次，然后停止(

Stacklitz url用于演示(如果url无效，请道歉，第一次分享我的代码(：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);
}