角装订方法或变量

Question

让说我有以下模板

<div *ngFor="let t of test">{{t}}</div> 

这个组件，而此代码

test: number[] = [1, 2, 3]; 
    ngOnInit() { 
    this.test = this.test.reduce((a, b) => { 
     a.push(b * 10); 
     return a; 
    }, []); 
    setTimeout(() => { 
     this.test.push(4); 
    }, 3000); 
    } 

这将导致该

10 
20 
30 
4 // not what I was looking for 

但是，如果我决定在方法中移动代码getTest()

<div *ngFor="let t of getTest()">{{t}}</div> 

与代码

getTest(): number[] { 
    return this.test.reduce((a, b) => { 
     a.push(b * 10); 
     return a; 
    }, []); 
    } 

然后延迟值将显示为40这正是我一直在寻找。

这是一个有效的实施或资源消耗？似乎经常调用方法getTest()。

在更大的图片中，我试图添加/删除/更新数组中的项目，并在屏幕上显示该数组的缩小版本。

Answer 1

如果绑定到一个方法，它会在每次角运行改变检测时被调用。这可能会成为一个严重的性能负担。

将方法的结果分配给字段并将其绑定到字段会更好。使用字段更改检测非常有效。

Answer 2

你可以使用可观察使用异步管 像（改变rxjs一部分，你的逻辑）

import { Observable } from 'rxjs/Observable'; 
import { from } from 'rxjs/observable/from'; 
import { of } from 'rxjs/observable/of'; 
import { reduce, concatMap, delay } from 'rxjs/operators'; 

test: number[] = [1, 2, 3]; 
$test:Observable<number>; 

ngOnInit() { 
    this.$test = from(this.test) 
     .pipe(
     concatMap(x => of(40)), 
     delay(1000), 
     reduce((acc, current) => { 
      return acc + current 
     },0) 
    ); 
} 

视图

{{$test | async}}