매트 자동 완성 - 선택한 옵션에 액세스하는 방법은 무엇을 참조하십시오.

매트 자동 완성 - 선택한 옵션에 액세스하는 방법은 무엇을 참조하십시오.

나는 그것을 알고 있습니다.[value]선택한 개체(내 경우 제안)를 저장합니다.재료 문서에 따르면,optionSelected이벤트를 발생시킵니다.나는 노력했다.[optionSelected] = "fooFn"하지만 존재하지 않습니다.Offer 개체에 액세스하고 싶습니다.감사합니다!

offer-search.component.vmdk:

  <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)'>

작업 데모

두 가지 방법으로 수행할 수 있습니다.

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>

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

전체 개체를 가져와 구성 요소에서 하위 값을 사용해야 하는 경우 이 솔루션을 사용합니다.

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

// 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" (optionSelected)="populateForm($event);>
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option.foodItem.name }}
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>

// TS

populateForm(event: MatAutocompleteSelectedEvent) {
    console.log(event.option.value);
}

유감스럽게도 (옵션)Selected)가 작동하지 않았습니다. (SelectionChange에서) 사용했습니다. 여기 SelectionChange에서 두 이벤트가 동시에 하나씩 선택 해제를 위해 다른 이벤트로 전환되므로 마지막 값이 이전에 선택된 값으로 표시됩니다.그래서 저는 다음과 같이 했습니다.

<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" (onSelectionChange)="populateForm($event);>
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option.foodItem.name }}
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>

// TS

populateForm(event: MatAutocompleteSelectedEvent) {
   if(event.source["_selected"] === true){
      //your next set of action goes here
    }
}

언급URL : https://stackoverflow.com/questions/48603673/mat-autocomplete-how-to-access-selected-option