如何在下拉列表中填充來自后端的數據和 select 中的值 Angular？

Question

我有 Angular 8 應用程序，我正在使用材料。

我想要歸檔的是來自后端的數據將填充到下拉列表中。

api 調用的代碼如下所示：

returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>;

api 致電：

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

  }

模板如下所示：

  <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>

但我收到以下錯誤：

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

在這條線上：

this.returnQrCodes$

謝謝

所以我有另一個過濾值的 api 調用：

像這樣：

 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);
      });
  }

因此，必須使用此 api 調用過濾來自后端的下拉值

那么現在如何使用這個 api 調用：

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

使用此硬編碼值： testQrJoost176以便用戶可以 select 下拉列表中的值

Answer 1

利用

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

如果您需要 console.log 也使用（副作用）：

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