如何以角度2跟踪数组答案

【问题标题】：how to track an array in angular 2如何以角度2跟踪数组
【发布时间】：2018-06-28 00:53:03
【问题描述】：

如何跟踪ngfor 数组，可以通过pipes 更改？

我尝试过 trackBy，制作局部变量，更改事件，但没有任何效果。

我有一个数字数组。

myArray = [2, 4, 5, 6];

这样使用

<div *ngFor="let item of myArray">
  {{item}}
</div>

<div> totalsum: </div>

这个数组，我要计算总和。如果我用管道过滤我的列表，显示的项目可能会更少。

myArray = [2, 6];

现在应该计算这个较短的列表。

【问题讨论】：

您要跟踪什么？当您说“跟踪”时，您是什么意思？你想做的“工作”是什么？您尝试使用“trackBy”、“局部变量”和“更改事件”来做什么？
This 可能会对您有所帮助。
我认为问题是如何减少（）数组项值来计算总和，但只能使用 *ngFor 在任何给定时刻存在的值，包括管道的影响。
jep.. 但是如何。看来我已经尝试了所有。也许我可以制作一个简单的管道，将当前数组保存在服务中。然后做一个 observable 通知计算器
听起来您的 Pipe 可能不纯？因为它正在变异myArray？如果不知道 Pipe 的工作原理，就很难提供解决方案。如果您需要根据某些条件过滤列表，则拥有一个不被修改的初始列表可能更直接，然后在功能上返回一个新数组，其中仅包含应显示/计算的项目*ngFor。你能提供你的管道的代码吗？

标签： arrays angular loops

【解决方案1】：

解决方案是在 ngfor 上做一个管道

import { Pipe, PipeTransform } from '@angular/core';
import { InvoiceService } from 'app/components/application/invoices/invoice.service';

@Pipe({
    name: 'invoiceFilteretList'
})
export class InvoiceFilteretList implements PipeTransform {
  constructor( private invoiceService: InvoiceService ) {}

    transform(value: any, q: string, type) {
    let totalSum = 0;
    let remaining = 0;

    for (let i = 0; i < value.length; i ++) {
      totalSum += value[i].totalPrice; 

      if ( value.hasOwnProperty( 'paid' )) {
        if (!value.paid) { // if not paid
          remaining += value.totalPrice;
        }
      }

    }

    this.invoiceService.SetTotalSum( totalSum );
    this.invoiceService.SetRemainingSum( remaining );

    return value;
    }
}

然后我做了一个服务来存储和remaning sum

import { ReplaySubject } from 'rxjs/ReplaySubject';

export class InvoiceService {
    public totalSum = new ReplaySubject<any>();
    public remainingSum = new ReplaySubject<any>();

  SetTotalSum( value: number ) {
    this.totalSum.next( value );
  }

  SetRemainingSum( value: number ) {
    this.remainingSum.next( value );
  }
}

最后我做了一个获取更新总和的方法

 filteredInvoiceList() {
    this.invoiceService.totalSum
    .subscribe(res => {
      this.filteredSum = res;
    });

    this.invoiceService.remainingSum
    .subscribe(res => {
      this.filteredSumNotPaid = res;
    });
  }

并在视图中显示它们

【讨论】：