Debe usar un .pipe() donde puede colocar un map para transformar las carteras con filter . Si lo coloca como una expresión dentro de la next devolución de llamada, no tendrá ningún efecto.

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

Como su tipo de instancia IPortfolio[] es una matriz, debe usar Array.prototype.filter para filtrar sus carteras:

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

Después de leer detenidamente la documentación de rxjs, obtuve el método que funciona mejor:

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

y en la plantilla

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