javascript - 如何从后端填充下拉列表中的数据并在 Angular 中选择值？

Question

我有 Angular 8 应用程序，并且正在使用 Material 。

我想要归档的是来自后端的数据将填充在下拉列表中。

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，以便用户可以从下拉列表中选择一个值

Answer 1

使用

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

如果你需要console.log也使用(副作用):

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