有人可以向我解释一下 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
时,您不能这样做据我所知。
我要疯了。
最佳答案
首先,一些前言:
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
未在任何地方定义。
关于Angular Material 自动完成 MatAutocompleteTrigger,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50030381/