带动态值过滤器的 mat-select-filter

Question

我无法使用 mat-select-filter 过滤数据：

`<mat-form-field *ngIf="fundComplexesList">
                        <mat-select placeholder="Using array of objects">
                              <mat-select-filter [placeholder]="'Filter'"     [displayMember]="'fundComplexName'" [array]="fundComplexesList" (filteredReturn)="filteredList5   =$event"></mat-select-filter>
                            <mat-option *ngFor="let item of filteredList5" [value]="item">
                                {{item.fundComplexName}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>`

我从 api 调用中获取 FundComplexesList 值

    `ngOnInit(): void {
     this.agreementService.getFundComplexes(false).subscribe(data => {
     this.fundComplexesList = data;
    },
    error => {
    console.log('Error while binding FundComplex dropdown.');
    });
 `

这是我的过滤方法：

  `public filteredList5 =  this.fundComplexesList.slice();`

问题是当 public FilteredList5 = this.fundComplexesList.slice(); 时我没有得到 this.fundComplexesList 值；函数被调用，有人可以建议如何在调用filteredList5 = this.fundComplexesList.slice();之前获取fundComplexesList中的值吗？

Answer 1

HTML 文件

 <div class="center">
  <mat-form-field *ngIf="fundComplexesList">
    <mat-select placeholder="Using array of objects">
      <mat-select-filter
        [placeholder]="'Filter'"
        [displayMember]="'title'"
        [array]="fundComplexesList"
        (filteredReturn)="filteredList5 = $event"
      ></mat-select-filter>
      <mat-option *ngFor="let item of filteredList5" [value]="item">
        {{ item.title }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

TS 文件

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  fundComplexesList: any = [];

  public filteredList5: any;
  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.fetchEmployees();
  }

  fetchEmployees() {
    this.http.get<any>('https://dummyjson.com/products').subscribe(
      (data) => {
        debugger;
        this.fundComplexesList = data.products;
        this.filteredList5 = this.fundComplexesList.slice();
      },
      (error) => {
        console.error('Error fetching employees:', error);
      }
    );
  }
}

注意：确保我已经使用了 json 的虚拟 api，所以你根据使用了你的 api 和 chnage html