角裝訂方法或變量

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}}