Angular Material 2 MatAutocompleteTrigger

Question

我的项目使用相同表单的 3 个自动完成组件，当用户未选择任何选项就离开时，我使用以下代码将文本字段设为空白，

@ViewChild(MatAutocompleteTrigger) bedTrigger:MatAutocompleteTrigger;
bedTrigger.panelClosingActions
        .subscribe(e => {
          console.log("ward");
          if (!(e && e.source)) {
            this.orgInfoForm.get('fieldName').setValue(null);
            this.wardTrigger.closePanel();
          }
}); 

bedTrigger 始终引用第一个自动完成组件，不能引用其他两个自动完成组件。我认为每个自动竞争都会得到一个 MatAutocompleteTrigger ，实际上表单只有一个 MatAutocompleteTrigger ，而这个引用第一个自动完成组件，我尝试

@ViewChild(MatAutocompleteTrigger) triggers:QueryList<MatAutocompleteTrigger>;

引用所有触发器，但我只得到一个 MatAutocompleteTrigger。请指导我如何获取对 angualr Material 2 版本 5.0.2 中其他两个自动完成组件的 MatAutocompleteTrigger 引用。

Answer 1

这是一个很好的。好的，首先，你应该使用@ViewChildren而不是@ViewChild，以及一个QueryList

@ViewChildren(MatAutocompleteTrigger) triggerCollection: QueryList<MatAutocompleteTrigger>;

然后，要访问每个元素的触发器，您应该迭代:

for (var trigger of this.triggerCollection.toArray()) {
  trigger.panelClosingActions
  .subscribe(e => {
    if (!(e && e.source)) {
      // do whatever you need
    }
  });
}

希望对您有帮助!