Angular 過濾器 rxjs，過濾不正確

Question

我正在嘗試實現來自 rxjs 的過濾器運算符，以過濾掉不同的 portflios ALL | 應用程序 | WEB |API

我希望過濾器根據屬性類型過濾掉投資組合：

這是過濾器的實現

為什么點擊不在這里過濾投資組合？ 我缺少什么概念？

 portfolios: IPortfolio[] = [];
  portfolioType: 'all' | 'app' | 'web'|'api' = 'all';
  errorMessage = '';
  sub!: Subscription;
   ngOnInit(): void {
    this.sub = this.portFolioService.getPortfolioData().subscribe({
      next: portfolios => {
        this.portfolios = portfolios;
        filter((portfolio: IPortfolio) => portfolio.type === this.portfolioType);
      },
      error: err => this.errorMessage = err
    })
  }

並且視圖 html 有

<ul id="portfolio-filters">
  <li [class.filter-active]="portfolioType == 'all'" (click)="portfolioType = 'all'">All</li>
  <li [class.filter-active]="portfolioType == 'app'" (click)="portfolioType = 'app'">APP</li>
  <li [class.filter-active]="portfolioType == 'web'" (click)="portfolioType = 'web'">WEB</li>
  <li [class.filter-active]="portfolioType == 'api'" (click)="portfolioType = 'api'">API</li>
</ul>

Answer 1

您需要使用.pipe() ，您可以在其中放置map以使用filter轉換投資組合。 將它作為表達式放在next回調中將不起作用。

this.portfolioService.getPortfolioData().pipe(
  map(portfolios => portfolios.filter(portfolio => this.portfolioType === portfolio.type))
).subscribe(portfolios => {
  // portfolios are filtered now
})

Answer 2

由於您的實例類型 IPortfolio[] 是一個數組，您應該使用 Array.prototype.filter 來過濾您的投資組合：

 portfolios: IPortfolio[] = []; portfolioType: 'all' | 'app' | 'web'|'api' = 'all'; errorMessage = ''; sub:; Subscription: ngOnInit(). void { this.sub = this.portFolioService.getPortfolioData():subscribe({ next. portfolios => { this.portfolios = portfolios.filter(portfolio => portfolio.type === this,portfolioType) }: error. err => this.errorMessage = err }) }

Answer 3

仔細閱讀 rxjs 文檔后，我得到了最有效的方法：

import { Component, OnInit, Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { IPortfolio } from '../portfolio';
import { PortfolioService } from '../portfolio.service';
@Component({
  selector: 'app-section-portfolio',
  templateUrl: './section-portfolio.component.html',
  styleUrls: ['./section-portfolio.component.scss']
})
export class SectionPortfolioComponent implements OnInit {

  private unsubscribe$: Subject<boolean> = new Subject<boolean>();

  constructor(
    private portfolioService: PortfolioService
  ) { }

  private portfolios: IPortfolio[] = [];
  public portfolios$: BehaviorSubject<Array<IPortfolio>> = new BehaviorSubject<Array<IPortfolio>>([]);
  portfolioType: string = 'all';

  ngOnInit() {
      this.getAllPortfolios();
  }

  private getAllPortfolios () {
      this.portfolioService.getPortfolioData().pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe((portfolios: Array<IPortfolio>) => {
          this.portfolios = portfolios;
          this.portfolios$.next(this.portfolios);
      })
  }

  public applyFilter (filter: string) {
    this.portfolioType = filter
    if (filter === 'all') {
      this.portfolios$.next(this.portfolios);
      return;
    }
    const filteredPortfolios = this.portfolios.filter(portfolio => portfolio.type === filter);
    this.portfolios$.next(filteredPortfolios);
    console.log(this.portfolioType)
  }
}

並在模板中

        <ul id="portfolio-filters">
           <li [ngClass]="portfolioType === 'all'? 'filter-active':''"(click)="applyFilter  ('all')">All</li>
          <li [ngClass]="portfolioType === 'app'? 'filter-active':''"  (click)="applyFilter ('app')">APP</li>
          <li [ngClass]="portfolioType === 'web'? 'filter-active':''"  (click)="applyFilter ('web')">WEB</li>
          <li [ngClass]="portfolioType === 'api'? 'filter-active':''" (click)="applyFilter ('api')">API</li>
        </ul>
      </div>
    </div>
      <div *ngFor="let portfolio of (portfolios$|async)">
<!-- End Portfolio Section -->