[英]Mat-autocomplete - How to access selected option?
我知道[value]
存储选定的对象(在我的情况下是提供)。 根据材料文档, optionSelected
发出一个事件。 我试过[optionSelected] = "fooFn"
但它不存在。 我只想访问 Offer 对象。 谢谢!
优惠-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>
你可以像这样使用它:
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>
它可以通过两种方式完成
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
从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;
}
如果您需要获取整个 OBJECT 并在组件中使用其子值,请使用此解决方案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.