Angular 选择combobox选项后列表过滤功能不生效如何解决

问题根因 #

过滤逻辑未生效的核心问题出在filter方法的判断条件上：当前仅判断了列表项的x.SourceType.Id是否为真值，未将其和当前选中的sourceType的唯一标识做等值匹配，因此只要数据中SourceType.Id不为空的条目都会被保留，未实现按选中项过滤的效果。

调整方案 #

1. 核心逻辑修改（TS文件） #

修改searchTransaction方法中的过滤条件，将选中的sourceType.Id和列表项的SourceType.Id做匹配即可：

sourceTypeList: IBasicModel[];
sourceType: IBasicModel;
stockTransactionList: IStockTransaction[] = [];

searchTransaction() {
    // 复制全量原始数据作为筛选基底
    let stockTransactionSearchData: IStockTransaction[] = [...this.stockTransactionList];
    
    // 仅在选中筛选条件时执行过滤
    if(this.sourceType?.Id){
        stockTransactionSearchData = stockTransactionSearchData.filter((x) => 
            // 核心修改：匹配选中项Id和列表项关联的SourceType.Id
            x.SourceType.Id === this.sourceType.Id
        );
    }
    
    // 更新数据源
    this.dataSourceStockTransactions.data = stockTransactionSearchData;
}

2. 可选优化（HTML部分） #

如果需要支持清空选中项回到全量数据，可以在mat-select中添加「全部」选项：

<mat-form-field appearance="outline" fxFlex fxFlex.gt-sm="50" class="pr-4">
    <mat-label>Document Type</mat-label>
    <mat-select [(ngModel)]="sourceType" (ngModelChange)="searchTransaction()">
        <!-- 新增清空选项 -->
        <mat-option [value]="null">全部</mat-option>
        <mat-option *ngFor="let dp of sourceTypeList" [value]="dp">
            {{dp.Name}}
        </mat-option>
    </mat-select>
</mat-form-field>

3. 可选优化：避免对象引用匹配问题 #

如果sourceTypeList是异步请求获取的，可能出现对象引用不一致导致的匹配失效问题，可以调整为绑定Id值而非整个对象，匹配逻辑更稳妥：

HTML修改

<mat-select [(ngModel)]="sourceTypeId" (ngModelChange)="searchTransaction()">
  <mat-option [value]="null">全部</mat-option>
  <mat-option *ngFor="let dp of sourceTypeList" [value]="dp.Id">
    {{dp.Name}}
  </mat-option>
</mat-select>

TS对应修改

// 替换原来的sourceType定义
sourceTypeId: number | null = null;

searchTransaction() {
    let stockTransactionSearchData: IStockTransaction[] = [...this.stockTransactionList];
    if(this.sourceTypeId){
        stockTransactionSearchData = stockTransactionSearchData.filter(x => x.SourceType.Id === this.sourceTypeId);
    }
    this.dataSourceStockTransactions.data = stockTransactionSearchData;
}

内容的提问来源于stack exchange，提问作者Rocket Monkey