Question

我对后端执行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>

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

谢谢

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-option>中至少包含一个<mat-select>。

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

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

2 个答案: