Angular 角材料自动完成装配自动完成装配机

有人能给我解释一下

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

@ViewChild（'autocompleteInput'，{read:MatAutocompleteTrigger}）触发器自动完成输入：MatAutocompleteTrigger；
{{item.label}
this.triggerautompleteInput.options selections.subscribe（option=>{
log（'我要自杀'，选项）；
});

它没有任何作用。我可以一整天都在选择选项，什么都不会发生当我单击某个选项时，订阅不应该接收数据吗？只有在自动完成面板处于活动状态且使用模糊关闭时，

this.triggerautompleteInput.panelClosingActions

才起作用

我不理解这种行为，也不理解文档

如果您需要通过

nativeElement

访问输入，该怎么办？据我所知，当您将其用作

MatAutocompleteTrigger

时，您无法执行该操作

---

我快发疯了。

首先，一些前言：

MatAutocompleteTrigger

主要用作模板指令。它“保存”输入元素，并提供一个点来呈现别处定义的

MatAutocomplete

选项

选项选择

将发出一个值流，但不会发出空值。它是来自

MatAutocompleteComponent

的流。在您的组件中，当自动完成组件完成其自身的生命周期逻辑时，您将希望订阅发射器

afterContentInit

接下来，看起来您正在将

[value]

绑定到

let item.label

。你不需要把

let

放进去；这只是声明一个未赋值变量，相当于

null

。由于

options选举

会发出与该选项相关的

[value]

，且此处传递的值为空，因此不会产生任何排放

最后，由于选项选择对

MatAutocompleteComponent

是已知的，但仅通过引用传递给

MatAutocompleteTrigger

，因此我认为最好从

MatAutocompleteComponent

获取这些事件，部分原因是这些属性属于该组件，但这主要是因为

MatAutocompleteComponent

有自己的

（选择的选项）

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 */ }

{{item.label}
公共doStuff（e:MatAutocompleteSelectedEvent）{/*stuff*/}

---

此外，还将

exercise.label

绑定到

模板值。不确定这是否是打字错误，但在您提供的代码中，

练习

没有定义任何地方。

哦，开枪吧。很抱歉，

let item.label

复制时出错。我的代码中只有

[value]=“item.label”

。另外，我的代码中的

练习.label

。我想匿名，但做得不好。我使用的是

选项selected

，但是当我将

标签

绑定到

值

时，我在optionSelected中只得到

标签

，而不是整个对象。但如果我能像你在例子中所展示的那样做到，那就很好了。非常感谢。你否决了我的回答吗？如果是，你能告诉我为什么吗？非常感谢你的帮助。我将修复我的示例中的错误。不幸的是，

（optionSelected）=“doStuff（$event）”

事件只保留标签的值，而不是整个对象的值。被否决的不是我，我也不知道你为什么被否决。需要注意的是，

选项selected

还将包含绑定到

mat选项的
[value]
的值。因此，要获得整个对象，只需绑定
[value]=“item”
。您可以通过模板绑定
{{item.label}
或您已有的
[displayWith]
显示功能来更改选项的显示方式。是的，我可以做到，我已经做到了，但是整个对象将存储在表单中。不仅仅是标签字符串。我不想那样，它感觉很脏/@是的，意识到这一点很好，但问题是：整个物体都被
*ngFor
跟踪。它仍然“存在”，并被变化检测跟踪。将它绑定到选项只是通过引用传递，而不是通过值传递。它不会被复制。仅绑定对象的一个键仍然将其作为对象的属性而不是值进行跟踪。如果要在绑定之前缩小对象，可以在重复之前对流进行
filter（）
处理--
async
管道自动处理取消订阅和清理