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

如果绑定到某个方法，则每次Angular运行更改检测时都会调用它。这可能会成为严重的性能负担。

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

Answer 2

您可以使用异步管道使用Observable 喜欢（将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}}

角度绑定方法或变量

2 个答案: