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

Answer 1

使用

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

如果您需要console.log，请同时使用（副作用）：

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

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

1 个答案: