Question

我正在使用自定义管道按城市过滤我的数据
然后使用切片管道显示前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));
  }
}

管道：

import { PipeTransform, Pipe, Output, EventEmitter } from '@angular/core';
import { CategoryData } from './category.model';

@Pipe({
    name: 'categoryPipe',
    pure: false
})

export class CategoryPipe implements PipeTransform {
    constructor() { }

    @Output() propertyCountFromFilter: number;
    change: EventEmitter<number> = new EventEmitter<number>();
    transform(input: CategoryData[], cityId?: number): CategoryData[] {
        console.log('run');
        if (input) {
            this.propertyCountFromFilter = input.length;
            if (input.length === 0) {
                return input;
            }
            input = input.filter(data => data.LocationId === cityId);
        }
        return input;
    }
}

查看：

  <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>

我正在尝试从管道到组件获取“ propertyCountFromFilter”值，但视图未更新

我可以使用它来更新视图，但是问题是我正在使用ssr，并且在运行代码时DOM不可用：

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

如果我使用categoryData.length，那么我只会得到在切片管道中设置的属性数量

Answer 1

您可以删除管道切片并使用javascript。那么您在categoryData.lenght中就有数据的计数

<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

Answer 2

您可以根据需要向管道传递尽可能多的参数。因此，解决方案之一可能是使用此附加参数作为更改的跟踪器。不幸的是，由于JS将按值复制原始值，因此您需要传递一个带有属性计数的对象。

我在这里为您创建了原始示例： https://codesandbox.io/s/xoz9214694

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

角度自定义管道数量

2 个答案: