Question

在angularjs中，您可以执行以下操作：

<div ng-controller="ExampleController">
  <div ng-init="a=1 + 5 -2">{{a}}
  </div>
</div>

// a = 4

5/6/7号角的等效值是多少？我有一个带数字的ngFor循环，我需要在底部显示总数。

@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let i of arr">{{random()}}</div>
  <b>Total: _____?</b>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  arr = new Array(10)
  random(){
    return  Math.floor((Math.random()*10));
  }
  name = 'Angular';
}

https://stackblitz.com/edit/angular-ij5uxc

谢谢

Answer 1

使用任何全局变量，并在每次生成如下随机数时添加-

lambda

Answer 2

我将生成一个随机数数组，然后仅使用一个函数来计算总和，请参见示例here。

arr: number[] = [];
arrayLength = 0;

ngOnInit() {    
  while (this.arrayLength < 10) {
    this.arr[this.arrayLength] = this.random();
    this.arrayLength++;
  }
}

random(): number {
  return  Math.floor((Math.random()*10));
}  

getTotal(): number {
  return this.arr.reduce(function(a, b) { return a + b; });
}

Answer 3

您应该依赖事件编程。开始充分利用RxJS！

在this sackblitz中，向您展示了如何进行操作：创建一个Subject，它是您的值的数组。然后，您创建另一个可观察值，它是数组值的总和。

使用此解决方案，您只需向数组中推送新值，就可以使用async管道在视图中自动更新它。

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { take, map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
  <div>
    <button (click)="addValueToSub()">
      Add a new value to the array
    </button>
  </div>
  <div *ngFor="let value of (sub | async)">{{value}}</div>
  <b>Total ? {{ total | async }} !</b>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  sub = new BehaviorSubject([]);

  total = this.sub.pipe(
    map(values => values.reduce((acc, curr) => acc + curr, 0))
  );

  constructor() {
    for (const i of new Array(10)) {
      this.addValueToSub();
    }
  }

  random() {
    return Math.floor((Math.random() * 10));
  }

  addValueToSub(value = this.random()) {
    this.sub.pipe(
      take(1)
    ).subscribe(values => {
      values.push(value);
      this.sub.next(values);
    });
  }
}

带计算的角度模板变量

3 个答案: