Javascript 如何从dropdownlist中的后端填充数据并选择Angular中的值？

我有一个角度8申请，我使用的材料

我想归档的是，来自后端的数据将填充在dropdownlist中

api调用的代码如下所示：

returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>;

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

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

模板如下所示：

returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>;

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

 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调用，用于过滤值：

像这样：

returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>;

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

 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

，以便用户可以从下拉列表中选择一个值

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

如果需要console.log，还可以使用（副作用）：

---

不要订阅和使用异步管道。异步管道在场景后面订阅（和取消订阅）我可以这样尝试：getQrCodes（）{this.returnQrCodes$=this.qrDefinitionService.getDefinitionForSelection（）.pipe（map（result=>{console.log（result）；}））；}但是仍然get errormap会将结果更改为

可观察的
Ah，oke，我在下拉列表中从后端获取返回的选项。但如果我选择一个。未选择值请更新问题，但冒昧猜测您的后端返回没有值字段-这将是map的一个很好的用途。但问题是，如果我只按下一个按钮，则列表将被填充。但是如果我触发dropdownlist，什么都没有发生啊，这就是在耍把戏：value=“option.value”。所以没有[]