Javascript 使用settimeout从dropdownlist中的后端返回数据

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

所以我尝试设置超时。但这不起作用

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

{{option.qrCode}

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

---

谢谢

尝试更改事件属性：

  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>

getQrCodes（）{
this.returnQrCodes$=this.QRCodeDefinitionService.getDefinitionForSelection（）
.管道（水龙头（控制台日志））；
}
{{option.qrCode}

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

因此，请尝试在您的

中至少包含一个

{{option.qrCode}
正在加载数据

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