Angular 過濾列表

Question

在我的代碼中，當從 combobox 中選擇一個選項時，我試圖過濾元素列表。 我的代碼如下。 現在，代碼沒有任何錯誤，但我無法成功過濾列表。 我應該怎么辦？

HTML：

<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 *ngFor="let dp of sourceTypeList" [value]="dp">
                                        {{dp.Name}}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>

TS：

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

    searchTransaction() {
            if (this.stockTransactionList && this.stockTransactionList.length > 0) {
                let stockTransactionSearchData: IStockTransaction[] = [
                    ...this.stockTransactionList,
                ];
//FILTER FOR SOURCE TYPE
                if(this.sourceType){
                    stockTransactionSearchData = stockTransactionSearchData.filter((x) => x.SourceType.Id);
                }
    
                //Default
                this.dataSourceStockTransactions.data = [...stockTransactionSearchData,];
            }
        }

Answer 1

我認為您沒有比較已實現的過濾器中的選定類型。

我創建了一個示例，試圖在Stackblitz上復制您的案例，您會在那里找到完整的示例。

  sourceTypeList: IBasicModel[] = [
    { id: 1, category: 'finance' },
    { id: 2, category: 'housing' }
  ];
  sourceType: IBasicModel;
  stockTransactionList: IStockTransaction[] = [
    { id: 1, info: 'tr1', sourceType: { id: 1, category: 'finance' } },
    { id: 2, info: 'tr2', sourceType: { id: 2, category: 'housing' } },
    { id: 1, info: 'tr3', sourceType: { id: 1, category: 'finance' } },
    { id: 2, info: 'tr4', sourceType: { id: 2, category: 'housing' } },
    { id: 1, info: 'tr5', sourceType: { id: 1, category: 'finance' } },
    { id: 2, info: 'tr6', sourceType: { id: 2, category: 'housing' } }
  ];

 //FILTER FOR SOURCE TYPE
      if (this.sourceType) {
        stockTransactionSearchData = stockTransactionSearchData.filter(
          x => x.sourceType.id === this.sourceType.id // the comparison 
        );
      }

這應該有效。

Answer 2

我認為您可以使用FormControl並訂閱 valueChanges。

sourceTypeControl = new FormControl('');

constructor() {
  this.sourceTypeControl.valueChanges.subscribe(value => {
    // ...
    console.log(value);
    if (value) {
      // stockTransactionSearchData = stockTransactionSearchData.filter((x) => x.SourceType.Id);
    }
  })
  }

<mat-form-field>
  <mat-label>Document Type</mat-label>
  <mat-select [formControl]="sourceTypeControl">
    <mat-option *ngFor="let dp of sourceTypeList" [value]="dp">
      {{dp.Name}}
    </mat-option>
  </mat-select>
</mat-form-field>

我創建了一個Stackblitz ，您必須根據自己的特定行為進行調整。