Угловой материал Автозаполнение MatAutocompleteTrigger

Question

Может кто-нибудь объяснить мне, как работает MatAutocompleteTrigger? 1002 *

@ViewChild('autocompleteInput', { read: MatAutocompleteTrigger }) triggerAutocompleteInput: MatAutocompleteTrigger;

<mat-form-field>
  <input
    #autocompleteInput
    matInput
    placeholder="Label"
    formControlName="label"
    [matAutocomplete]="autocompletePanel"
  >
</mat-form-field>

<mat-autocomplete #autocompletePanel="matAutocomplete" [displayWith]="displayFn">
  <mat-option
    *ngFor="let item of items | async"
    [value]="item.label"
  >
    {{ item.label }}
  </mat-option>
</mat-autocomplete>

this.triggerAutocompleteInput.optionSelections.subscribe(option => {
      console.log('Im gonna kill myself', option );
    });

Это ничего не делает.Я могу выбирать варианты весь день, и ничего не сработает. Разве подписка не должна получать данные, когда я нажимаю какую-либо опцию? this.triggerAutocompleteInput.panelClosingActions работает только тогда, когда у вас активна панель автозаполнения и вы закрываете ее с размытостью.

Я не понимаюповедение и я не понимаю документацию.

А что если вам нужен доступ к входу через nativeElement? Вы не можете сделать это, когда используете его как MatAutocompleteTrigger насколько я могу судить.

Я схожу с ума.

Answer 1

Прежде всего, некоторое предисловие:

MatAutocompleteTrigger функционирует в основном как шаблонная директива.Он «держит» элемент ввода и предоставляет точку для отображения опций MatAutocomplete, определенных в другом месте.

optionSelections будет выдавать поток значений, но не будет давать нулевые значения.Это поток, который приходит из MatAutocompleteComponent.В вашем компоненте вы захотите subscribe для эмиттера afterContentInit, когда компоненты автозаполнения закончили свою собственную логику жизненного цикла.

Далее, похоже, что вы привязываете [value] к let item.label.Вам не нужно помещать туда let;это просто объявление неназначенной переменной и эквивалентно null.Поскольку optionSelections испускает это [value], связанное с опцией, и поскольку переданное здесь значение равно нулю, вы не получите никаких выбросов.

Наконец, поскольку выбор опций известен MatAutocompleteComponentно только передавая ссылку на MatAutocompleteTrigger, я считаю, что лучше получать эти события от MatAutocompleteComponent, отчасти потому, что эти свойства принадлежат этому компоненту, но в основном потому, что MatAutocompleteComponent имеет свой собственный (optionSelected) EventEmitter, которыйможет быть привязан к шаблону:

<mat-form-field>
  <input
    #autocompleteInput
    matInput
    placeholder="Label"
    formControlName="label"
    [matAutocomplete]="autocompletePanel"
  >
</mat-form-field>

<mat-autocomplete #autocompletePanel="matAutocomplete" [displayWith]="displayFn" (optionSelected)="doStuff($event)">
  <mat-option
    *ngFor="let item of items | async"
    [value]="item.label"
  >
    {{ item.label }}
  </mat-option>
</mat-autocomplete>


public doStuff(e: MatAutocompleteSelectedEvent) { /* stuff */ }

Также у вас есть exercise.label привязка к значению шаблона <mat-option>.Не уверен, что это опечатка, но в предоставленном вами коде exercise нигде не определено.