How to populate data from backend in dropdownlist and select the value in Angular?

Question

I hava Angular 8 application and I am using material.

What I want to archieve is that data from the backend will be populated in a dropdownlist.

The code of the api call looks like this:

returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>;

api call:

getQrCodes(){
this.returnQrCodes$ =    this.qrDefinitonService.getDefinitionForSelection().subscribe(result => {
      console.log(result);
    })

  }

and the template looks like this:

  <div
      class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
      <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie"  >
        <mat-option  *ngFor="let option of returnQrCodes$ | async " [value]="option.value" >
          {{ option.qrCode }}
        </mat-option>
      </mat-select>
    </div>

But I get the following error:

Type 'Subscription' is missing the following properties from type 'Observable<QRCodeDefinitionSelectOptionApi[]>': _isScalar, source, operator, lift, and 6 more.ts(2740)

on this line:

this.returnQrCodes$

Thank you

So I have a other api call who filters the values:

like this:

 filterByQrCodes() {
    this.participantService
      .filterParticipantsByQRCode(1, this.selectedValue as any , moment(this.startDate).format('YYYY MM D'), 'testQrJoost176')
      .subscribe(filterByQrcode => {
        console.log(filterByQrcode);
        console.log(this.selectedValue as any);
      });
  }

So the dropdown values from the backend has to filtered with this api call

So how now use this api call:

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

with this hard coded value: testQrJoost176 so that a user can select a value from the dropdownlist

Answer 1

Use

getQrCodes(){
    this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection()
}

if you need to console.log also use (side effect):

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