Mat-autocomplete - 如何訪問選定的選項？

Question

我知道[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>

Answer 1

你可以像這樣使用它：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>

工作演示

Answer 2

它可以通過兩種方式完成

1. 使用從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>

2. 使用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>

Answer 3

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

Answer 4

如果您需要獲取整個 OBJECT 並在組件中使用其子值，請使用此解決方案

https://stackoverflow.com/a/69652848/3944285