Question

我正在尝试创建一个过滤器管道以过滤图像列表，以仅显示用户选择的相册中的图像。过滤器的工作方式与我对过滤器参数进行硬编码并正确过滤图像的方式相同。当我改用打字稿文件中的属性时，它不会显示任何图像。

这是我在另一个文件中创建的过滤器管道：

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, filterString: any, propName: any): any {
    if(value.length === 0 || filterString === []) { 
      return value;
    }
    const resultArr = [];
    for(const item of value) { 
      if(item[propName] === filterString) {
        resultArr.push(item); 
      }
    }
    return resultArr;  

  }

}

在此处是在图库列表组件html中实现管道的地方：

<ul class="container">
    <li class="item-list-container oneSec">
        <app-image-item
          *ngFor="let imageEl of galleryList | filter:filterStrings:propertyName"
          [image]="imageEl"
          (click)="onLike(imageEl.imagePath)">
        </app-image-item>
    </li>
</ul>

这是在图库列表组件中设置“ filterStrings”和“ propertyName”属性的位置：

 ngOnInit() {
   this.fromAlbumSub = this.galleryListService.fromAlbum.subscribe(albumName => {
      this.propertyName = 'album';
      this.filterStrings.push(albumName);
      console.log(this.propertyName); // THIS IS CORRECTLY LOGGED TO THE CONSOLE AND IS SET TO 'ALBUM'
      console.log(this.filterStrings); // THIS IS CORRECTLY LOGGED TO THE CONSOLE AND IS LOGGED AS THE ALBUM NAME SUCH AS 'INDIA'
    });

主题是在单独的服务文件中创建的：

fromAlbum = new BehaviorSubject<string>(null);

...并且当用户从相册组件中选择一个相册时触发：

onAlbumSelect(albumName: string) {
    this.router.navigate(['gallery-list']); 
    this.galleryListService.fromAlbum.next(albumName);
  }

自定义过滤器管道未过滤

0 个答案: