使用 settimeout 从下拉列表中的后端返回数据答案

【问题标题】：return data from backend in dropdownlist with settimeout使用 settimeout 从下拉列表中的后端返回数据
【发布时间】：2019-10-14 11:11:08
【问题描述】：

我对后端进行 api 调用以填充下拉列表，并且它可以工作。但问题是，只有当用户在下拉列表上单击两次时，数据才会显示在下拉列表中。但是在控制台中，当我单击下拉列表一次时，我看到数据已加载。

所以我尝试使用 setTimeout。但这不起作用。

这是 api 调用：


  getQrCodes() {
    setTimeout(() => {
      this.returnQrCodes$ = this.qrCodeDefinitonService.getDefinitionForSelection()
          .pipe(tap(console.log));
    }, 1000);
  }

这是模板：

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

所以我的问题是：如果你只点击一次，如何在下拉列表中显示数据？

谢谢

【问题讨论】：

标签： javascript angular observable settimeout

【解决方案1】：

尝试使用 change 事件属性：

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


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

【讨论】：

【解决方案2】：

当您第一次单击时，选择控件中没有任何选项，因此它不会尝试打开面板。然后你的 async 方法将选项加载到 DOM 中，并在下一次单击时打开。

所以请尝试在您的<mat-select> 中至少包含一个<mat-option>。

<mat-select placeholder="Opties" name="option" 
     [(ngModel)]="selectedValueOptie" (click)="getQrCodes()">
        <mat-option *ngFor="let option of returnQrCodes$ | async as codes" 
            value="option.value"> {{ option.qrCode }} </mat-option>
        <mat-option *ngIf="!codes"
            value="empty">Data is loading</mat-option>
      </mat-select>
    </div>

【讨论】：