Angular Material 自动完成 MatAutocompleteTrigger

Question

有人可以向我解释一下 MatAutocompleteTrigger 是如何工作的吗？

@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 ，当自动完成组件完成自己的生命周期逻辑时。

接下来，您似乎要绑定(bind) [value]至 let item.label .你不需要把 let在那里;这只是声明一个未分配的变量，相当于 null .自 optionSelections发出这个 [value]与选项相关联，并且由于此处传递的值为 null，因此您不会得到任何排放。

最后，由于选项选择是已知的 MatAutocompleteComponent但仅通过引用传递给 MatAutocompleteTrigger ，我认为最好从 MatAutocompleteComponent 中获取这些事件，部分是因为这些属性属于该组件，但主要是因为 MatAutocompleteComponent有自己的(optionSelected)可以绑定(bind)模板的 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绑定(bind)到 <mat-option>模板值。不确定这是否是错字，但在您提供的代码中 exercise未在任何地方定义。