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用作SELECT SUBSTRING('H345678_30',4,CHARINDEX('_','H345678_30')-4)，我就无法做到这一点告诉。

我疯了。

Answer 1

首先，一些前言：

MatAutocompleteTrigger主要用作模板指令。它“保存”输入元素，并提供一个点来呈现其他地方定义的MatAutocomplete选项。

optionSelections将发出一个值流，但不会发出空值。它是来自MatAutocompleteComponent的流。在您的组件中，当自动完成组件完成了自己的生命周期逻辑时，您需要subscribe到发射器afterContentInit。

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

最后，由于选项选项已为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未在任何地方定义。

角度材质自动完成MatAutocompleteTrigger

1 个答案: