使用设置超时从下拉列表中的后端返回数据

Question

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

所以我尝试使用设置超时。但这行不通。

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

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

谢谢

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

Answer 2

首次单击时，选择控件中没有选项，因此它不会尝试打开面板。然后，您的异步方法将选项加载到 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>