[英]How to populate data from backend in dropdownlist and select the value in Angular?
I hava Angular 8 application and I am using material.我有 Angular 8 应用程序,我正在使用材料。
What I want to archieve is that data from the backend will be populated in a dropdownlist.我想要归档的是来自后端的数据将填充到下拉列表中。
The code of the api call looks like this: api 调用的代码如下所示:
returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>;
api call: api 致电:
getQrCodes(){
this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().subscribe(result => {
console.log(result);
})
}
and the template looks like this:模板如下所示:
<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>
But I get the following error:但我收到以下错误:
Type 'Subscription' is missing the following properties from type 'Observable<QRCodeDefinitionSelectOptionApi[]>': _isScalar, source, operator, lift, and 6 more.ts(2740)
on this line:在这条线上:
this.returnQrCodes$
Thank you谢谢
So I have a other api call who filters the values:所以我有另一个过滤值的 api 调用:
like this:像这样:
filterByQrCodes() {
this.participantService
.filterParticipantsByQRCode(1, this.selectedValue as any , moment(this.startDate).format('YYYY MM D'), 'testQrJoost176')
.subscribe(filterByQrcode => {
console.log(filterByQrcode);
console.log(this.selectedValue as any);
});
}
So the dropdown values from the backend has to filtered with this api call因此,必须使用此 api 调用过滤来自后端的下拉值
So how now use this api call:那么现在如何使用这个 api 调用:
getQrCodes(){
this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(
tap(console.log)
)
}
with this hard coded value: testQrJoost176
so that a user can select a value from the dropdownlist使用此硬编码值:
testQrJoost176
以便用户可以 select 下拉列表中的值
Use利用
getQrCodes(){
this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection()
}
if you need to console.log also use (side effect):如果您需要 console.log 也使用(副作用):
getQrCodes(){
this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(
tap(console.log)
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.