如果在Angular中选择下拉列表，如何显示材料下拉列表中的数据?

Question

我有一个下拉列表，我想在选择下拉列表时显示数据。

如果我将函数放在 ngOnInit 中，它可以工作：

ngOnInit() {
this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(tap(console.log));
}

但是，如果您没有选择下拉列表，我当然不想加载数据。但是如果我为它做一个函数：

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

模板如下所示：

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

我选择下拉列表没有任何反应。

谢谢

我试过这样：

<div
class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
<mat-select placeholder="Opties" name="option" [(ngModel)] = "getQrCodes"  >
<mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus" >
{{ option.status }}
</mat-option>
</mat-select>
</div>

我也尝试过这样：

<div
class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
<mat-select placeholder="Opties" name="option" (selectionChange)="getQrCodes($event.value)"  >
<mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus" >
{{ option.status }}
</mat-option>
</mat-select>
</div>

我试过这样：

<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.qrDefinitonService.getDefinitionForSelection().pipe(tap(console.log));
}

Answer 1

似乎你没有在任何地方调用"getQrCodes(("函数