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总是引用第一个自动完成组件，不能引用其他两个自动完成组件。我认为每个autocompete得到一个MatAutocompleteTrigger，只为表单实现一个MatAutocompleteTrigger，这个引用第一个自动完成组件，我试试

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

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

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

我希望它有所帮助！

角度材料2 MatAutocompleteTrigger

1 个答案: