[英]Mat-autocomplete - How to access selected option?
I know that [value]
stores the selected Object (Offer in my case).我知道
[value]
存储选定的对象(在我的情况下是提供)。 According to materials documentation, optionSelected
emits an event.根据材料文档,
optionSelected
发出一个事件。 I tried [optionSelected] = "fooFn"
but it doesn't exist.我试过
[optionSelected] = "fooFn"
但它不存在。 I just want to access the Offer object.我只想访问 Offer 对象。 Thanks!
谢谢!
offer-search.component.html:优惠-search.component.html:
<h5 #offerP>option - autoComplete</h5>
<mat-form-field id="form-field">
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
{{ option.foodItem.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
You can use it like :你可以像这样使用它:
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>
It can be done in two ways它可以通过两种方式完成
onSelectionChange
which emits MatOptionSelectionChange
from mat-option
mat-option
发出MatOptionSelectionChange
onSelectionChange
<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let option of options"
[value]="option"
(onSelectionChange)="updateMySelection($event)"
>
{{ option }}
</mat-option>
</mat-autocomplete>
optionSelected
which emits MatAutocompleteSelectedEvent
from mat-autocomplete
optionSelected
从mat-autocomplete
发出MatAutocompleteSelectedEvent
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="updateMySelection($event)">
<mat-option
*ngFor="let option of options"
[value]="option"
>
{{ option }}
</mat-option>
</mat-autocomplete>
<mat-form-field floatLabel="always">
<mat-label>UTBMS Activity Codes</mat-label>
<input type="text" placeholder="Activity Codes" [(ngModel)]="activityCode" aria-label="Number" matInput [formControl]="utbmsActivityCodesControl"
[matAutocomplete]="autoActivityCodes">
<mat-autocomplete autoActiveFirstOption #autoActivityCodes="matAutocomplete">
<mat-option *ngFor="let option of utbmsActivityCodes | async" (onSelectionChange)="setBillingActivity(option)" [value]="option.code">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
setBillingActivity(object){
this.actionData.libraryContent.billingActivityId=object.activityId;
}
If you need to get the whole OBJECT and use its children values in the component use this solution如果您需要获取整个 OBJECT 并在组件中使用其子值,请使用此解决方案
https://stackoverflow.com/a/69652848/3944285 https://stackoverflow.com/a/69652848/3944285
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.