Angular 8 Material下拉框加载后端数据及筛选实现问题

Let's fix your issues and get the dropdown and filtering working smoothly!

1. Fixing the Observable Type Error #

First, let's clarify why you got that initial error:
When you call .subscribe() on an Observable, it returns a Subscription object (used to unsubscribe later), not the Observable itself. Assigning this to returnQrCodes$ (which is typed as an Observable) caused the type mismatch.

Your corrected getQrCodes() method is perfect! Using .pipe(tap(console.log)) keeps the return value as an Observable (since tap only runs side effects like logging without altering the stream), so the async pipe in your template can properly subscribe to it and render the options.

Just make sure you call getQrCodes() when the component initializes (like in ngOnInit()):

ngOnInit(): void {
  this.getQrCodes();
}

getQrCodes(){
  this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe( tap(console.log) );
}

2. Integrating Dropdown Selection with Filter API #

Now let's connect the selected dropdown value to your filter API call. Here's what you need to do:

Step 1: Declare the Selected Value Variable #

Add the bound variable to your component (matching the [(ngModel)] in your template):

// Match the type to your QRCodeDefinitionSelectOptionApi['value'] (e.g., string, number)
selectedValueOptie: QRCodeDefinitionSelectOptionApi['value'];

// Ensure these existing variables are declared too
selectedValue: any;
startDate: Date;

Step 2: Update the Filter Method #

Modify filterByQrCodes() to use the selected dropdown value instead of the hardcoded 'testQrJoost176' (adjust this if you need to combine the hardcoded value with the selection—based on your API's requirements):

filterByQrCodes() {
  // Guard clause: Don't call the API if no option is selected
  if (!this.selectedValueOptie) {
    console.warn('Please select an option from the dropdown first!');
    return;
  }

  this.participantService
    .filterParticipantsByQRCode(
      1,
      this.selectedValue as any,
      moment(this.startDate).format('YYYY MM D'),
      this.selectedValueOptie // Use the selected dropdown value here
    )
    .subscribe(filterByQrcode => {
      console.log('Filter Results:', filterByQrcode);
      console.log('Selected QR Code:', this.selectedValueOptie);
    });
}

Step 3: Add a Way to Trigger the Filter #

You can either add a button to trigger the filter manually, or run it automatically when the user selects an option:

Option A: Add a Filter Button

Add this below your dropdown in the template:

<button mat-raised-button color="primary" class="mt-2" (click)="filterByQrCodes()">
  Filter Participants
</button>

Option B: Trigger on Dropdown Selection

Modify the mat-select to run the filter immediately when a user picks an option:

<mat-select 
  placeholder="Opties" 
  name="option" 
  [(ngModel)]="selectedValueOptie"
  (selectionChange)="filterByQrCodes()"
>
  <mat-option *ngFor="let option of returnQrCodes$ | async " [value]="option.value" > 
    {{ option.qrCode }} 
  </mat-option>
</mat-select>

Final Checks #

• Double-check that your QRCodeDefinitionSelectOptionApi interface includes both value and qrCode properties (since you're using them in the template).
• If using Angular's strict mode, ensure all variables are properly typed to avoid additional type errors.

内容的提问来源于stack exchange，提问作者mightycode Newton