Question

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>
        <input type="text" placeholder="City" [(ngModel)]="pipeCity" />
      </th>
      <th>
        <input type="text" placeholder="Location" [(ngModel)]="pipeLocation" />
      </th>
  </thead>
  <tbody *ngFor="let city of arrayCities | filter:pipeCity:'city'
                                                       | filter:pipeLocation:'location'
                                                       let last = last; let i = index; count as pipeCount ">
    <tr>
      <td>{{i+1}}</td>
      <td>{{city.city}}</td>
      <td>{{city.location}}</td>
      <span *ngIf="last">Found:{{pipeCount}}</span>
    </tr>
  </tbody>
</table>

我正在寻找将Found:{{pipeCount}}移到上方

的解决方案

Found:{{pipeCount}}
<table class="table">
  <thead>
    <tr>

我试过：一个）创建onTemporary函数，从组件调用：

onTemporary(count){
return this.temporaryValue=count;
}

并在模板中：

Found:{{this.temporaryValue}}
<table class="table">
  <thead>

但这不是一个好的解决方案。

b）中按@Directive。但这与a）非常相似。将局部变量移动到模板中的任何位置有什么角度解决方案吗？

Answer 1

如果您已经了解城市的管道，那么您只需要使用.map和.reduce进行一些数据评估。例如，您应该在ngOnInit中执行以下操作：

var cities = [
  {
    name: "metropolis",
    suburbs: [ 
      { name: "sub1", pipes: 1 },
      { name: "sub2", pipes: 2 },
      { name: "sub3", pipes: 3 }
    ]
  },
  {
    name: "super city",
    suburbs: [ 
      { name: "sub1", pipes: 11 },
      { name: "sub2", pipes: 22 },
      { name: "sub3", pipes: 33 }
    ]
  },
  
];

var sum = (val, total) => val + total;
var totalPipesPerCity = cities.map(city => city.suburbs.map(suburb => suburb.pipes).reduce(sum));
var totalPipesInAllCities = totalPipesPerCity.reduce(sum);

console.log(totalPipesPerCity );
console.log(totalPipesInAllCities );

Answer 2

首先，强烈建议不要使用过滤管道，而是在代码中进行过滤。然后，您的代码可以公开模板可以在任何地方使用的属性。

我在这里有一个例子：https://blogs.msmvps.com/deborahk/filtering-in-angular/

以下是该代码的一部分：

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
    pageTitle: string = 'Product List';
    errorMessage: string;

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}

然后你可以这样做：

Found:{{filteredProducts?.length}}
<table class="table">
  <thead>

Angular2，将局部变量从* ngFor移动到模板中的任何位置

2 个答案: