Question

是否可以从项目列表获取＆＃34;项目＆＃34; 并转移到项目过滤器并使用它在组件内部如使用服务？

<div class="container">
    <item-filter (testOut) = "retrieveMe($event)" ></item-filter>
    <div class="row">
    <item-list *ngFor = "let item of items | filter :   filterConditions" [storyInfo] = 'item'></item-list> 
    </div><!-- Row -->
</div><!-- Container-->

Answer 1

将部分从管道移动到父组件，包括已过滤列表的属性以及列入项目过滤器的@Input：

父组件类：

items: any[] = [];
filteredItems: any[] = [];

retrieveMe(criteria: any): void {
  this.filteredItems = this.filter(items, criteria);
}

filter(items: any[], criteria: any): any[] {
  return // code from your pipe (input and output would be the same)
}

父模板：

<div class="container">
  <item-filter (testOut)="retrieveMe($event)" [filteredItems]="filteredItems"></item-filter>
  <div class="row">
    <item-list *ngFor = "let item of filteredItems" [storyInfo] = 'item'></item-list> 
  </div><!-- Row -->
</div><!-- Container-->

item-filter组件类：

import { ..., Input } from '@angular/core';

@Input() filteredItems: any[] // <- here's your filtered items list

Angular 2：* ngFor内变量的范围

1 个答案: