Angular 角度自定义管道计数

我正在使用自定义管道按城市筛选数据
然后我使用切片管道显示前5个结果

我的问题是，我想知道在切片管道之前，我总共得到了多少结果

是否有方法将计数从管道“发送”到组件，然后使用新值更新视图

我的组件如下所示：

import { Component, OnInit, Input } from '@angular/core';
import { CategoryPipe } from './category-filter.pipe';
import { Router } from '@angular/router';
import { CategoryService } from './category-page.service';
import { CategoryData } from './category.model';

@Component({
  selector: 'app-category-page',
  templateUrl: './category-page.component.html',
  styleUrls: ['./category-page.component.scss'],
  providers: [CategoryPipe]
})

export class CategoryComponent implements OnInit {
  @Input() propertyCountFromFilter: number;
  categoryData: CategoryData[];
  public cityId = 0;

  constructor(
    public categoryService: CategoryService,
    private router: Router) { }

  propertyLimit = 5;
  ngOnInit() {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
    this.categoryService.getPropertyData()
      .then(result => this.categoryData = JSON.parse(result))
      .then(result => this.propertyCountFromFilter = this.categoryData.length)
      .catch(error => console.log(error));
  }
}

管道：

---

如果我使用categoryData.length，我将只获取切片管道中设置的属性数

您可以删除管道切片并使用javascript。然后，在categoryData.Length中有您的数据计数

<div class="property" *ngFor="let property of categoryData.slice(0,propertyLimit) | categoryPipe: cityId">
    <h3 class="property-header">
      {{property.Title}}
    </h3>
  </div>
There are {{categoryData.length}} cities

{{property.Title}
有{{categoryData.length}个城市

您可以向管道传递任意数量的参数。 因此，其中一个解决方案可以使用这个额外的参数作为变更的跟踪工具。 不幸的是，由于JS将按值复制原语值，因此您需要传递一个对象，例如带有属性计数的对象

我在这里为您创建了一个原始示例：

---

因此，通过使用这种方法，您可以使用管道创建这样的连接。我甚至会尝试使用EventEmitter，而不是简单的对象。

Hi Eliseo，使用js是什么意思？如果我使用你提供的代码，我不会只获得PropertyLimit中的第一个属性设置它只会用函数javascript Slices替换管道切片我尝试了你的方法，但我无法让它工作，countObj.count不会在管道后更新，我以前从未使用过codesandbox，但我尝试在那里添加我的实时代码，你能看看我做错了什么吗？对不起，是我的错，我成功了：）我用正确的代码更新了我的答案，非常感谢@Yevhenii Herasymchuk

  <div>Total number of properties: <span id="propertyCount">{{propertyCountFromFilter}}</span></div>
  <div class="property" *ngFor="let property of categoryData | categoryPipe: cityId | slice:0:propertyLimit">
    <h3 class="property-header">
      {{property.Title}}
    </h3>
  </div>

document.getElementById('propertyCount').innerHTML = this.propertyCountFromFilter.toString();

<div class="property" *ngFor="let property of categoryData.slice(0,propertyLimit) | categoryPipe: cityId">
    <h3 class="property-header">
      {{property.Title}}
    </h3>
  </div>
There are {{categoryData.length}} cities