管道导致inifinte循环

Question

我正在使用Product表，该表具有其权重的输入字段。更改此值后，我想重新计算列表中的其他宏元素。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'calculateMacro'
})
export class CalculateMacroPipe implements PipeTransform {

  transform(value: Product): Product {
    return {
      productName: value.productName,
      calories: value.calories * value.weight / 100,
      protein: value.protein * value.weight / 100,
      fat: value.fat * value.weight / 100,
      carbohydrates: value.carbohydrates * value.weight / 100,
      weight: value.weight
    }
  }
}

问题是，这导致我的应用程序陷入无限循环，为什么有什么主意？

编辑＃ 添加整个组件代码

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { CalculateMacroPipe } from '../../pipes/calculate-macro.pipe';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  @Output() 
  emitEvent = new EventEmitter();

  calculateMacroPipe: CalculateMacroPipe = new CalculateMacroPipe();

  productList: Product[] = [];
  searchString: string;
  page = 1;
  pageSize = 25;
  collectionSize = 0;

  loading: boolean;

  constructor(public productService: ProductService) { }

  ngOnInit() {
    this.loading = true;
      this.productService.getProducts().subscribe(res => {
         this.productList = res;
         this.collectionSize = this.productList.length;
         this.loading = false;
      })
  }

  addProduct(product) {
    var productCopy = {
      productName: product.productName, 
      calories: product.calories * product.weight / 100,
      protein: product.protein * product.weight / 100,
      fat: product.fat * product.weight / 100,
      carbohydrates: product.carbohydrates * product.weight / 100,
      weight: product.weight
    }
    this.emitEvent.emit(productCopy)
  }

  get products(): Product[] {
    return this.productList
      .filter(product => this.matchValue(product.productName, this.searchString))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize)
      .map(product => this.calculateMacroPipe.transform(product));
  }

  matchValue(value: string, searchText: any): any {
    if(!searchText) {
      return value;
    }
    return value.toLowerCase().includes(searchText);
  }
}

和html部分

<div style="margin-top: 10px">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col" style="width: 15%">Produkt</th>
                <th scope="col" style="width: 15%">Kalorie</th>
                <th scope="col" style="width: 15%">Białko [g]</th>
                <th scope="col" style="width: 15%">Tłuszcze [g]</th>
                <th scope="col" style="width: 15%">Węglowodany [g]</th>
                <th scope="col" style="width: 10%">Waga [g]</th>
                <th><input type="text" class="search form-control" name="searchString" placeholder="Wyszukaj..."
                        [(ngModel)]="searchString"></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let product of products">
                <td>{{ product.productName }}</td>
                <td>{{ product.calories }}</td>
                <td>{{ product.protein }}</td>
                <td>{{ product.fat }}</td>
                <td>{{ product.carbohydrates }}</td>
                <td><input type="text" class="search form-control" 
                     [(ngModel)]="product.weight" style="text-align: center">
                </td>
                <td><button class="btn btn-outline-success mr-sm-2" (click)="addProduct(product)">Dodaj</button></td>
            </tr>
        </tbody>
    </table>
    <app-loader *ngIf="loading"></app-loader>
    <div class="alert alert-secondary" role="alert" style="text-align: center" *ngIf="products.length == 0 && !loading">
        Nie znaleziono szukanego produktu
    </div>
    <div class="d-flex justify-content-between p-2">
        <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
        </ngb-pagination>
    </div>