我知道[value]
存储了所选的Object(在我的情况下是Offer)。根据材料文档,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>
答案 0 :(得分:22)
您可以像以下一样使用它:
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>
<强> WORKING DEMO 强>
答案 1 :(得分:8)
我们可以通过两种方式完成
1)使用onSelectionChange
从MatOptionSelectionChange
发出mat-option
<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let option of options"
[value]="option"
(onSelectionChange)="updateMySelection($event)"
>
{{ option }}
</mat-option>
</mat-autocomplete>
2)使用optionSelected
从MatAutocompleteSelectedEvent
发出mat-autocomplete
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="updateMySelection($event)">
<mat-option
*ngFor="let option of options"
[value]="option"
>
{{ option }}
</mat-option>
</mat-autocomplete>
答案 2 :(得分:2)
<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;
}