angular - 保持自动完成建议面板打开以进行多项选择，并在 Angular Material 2 的面板外部单击时关闭

Question

我想修改多选的自动完成组件。 我想要的是建议面板应该通过复选框打开以进行多项选择，如果用户在建议面板之外单击则关闭它。根据文档，我们可以通过 panelClosingActions 处理它，但我找不到任何使用方法。

我能够通过 MdAutocompleteTrigger 事件和 openPanel 方法保持面板打开，但如果选择了第二个索引并选择第四个索引，那么第二个索引复选框将取消勾选并再次勾选。

<md-autocomplete #auto="mdAutocomplete" id=autoComplete>
  <md-option *ngFor="let state of filteredStates | async" 
[value]="state.name" (click)="handleAutocomplete()">
<md-checkbox [checked]="state.selected" [(ngModel)]="state.selected">
    <span>{{ state.name }}</span> |
    <small>Population: {{state.population}}</small>
</md-checkbox>
  </md-option>
</md-autocomplete>

@ViewChild('autocomplete', {read: MdAutoCompleteTrigger})
autoComplete: MdAutocompleteTrigger

handleAutocomplete(){
this.autoComplete.openPanel();
}

非常感谢任何帮助

Answer 1

我遇到了同样的问题。

我找到的唯一解决方案是在使用 mat-autocomplete optionSelected 方法选择选项时立即重新打开选项面板。

HTML

<mat-autocomplete 
#auto="matAutocomplete" 
[displayWith]="displayFn" 
(optionSelected)="openPanel()">
    <mat-option *ngFor="let tag of filteredSources" [value]="tag.id">
        <span>{{ tag.text }}</span>
    </mat-option>
</mat-autocomplete>

TS

@ViewChild(MatAutocompleteTrigger) autoTrigger: MatAutocompleteTrigger;
openPanel(): void {
    const self = this;
    setTimeout(function () {
        self.autoTrigger.openPanel();
    }, 1);
}

这不是一个优雅的解决方案，因为面板仍然关闭并且有闪烁效果，但我找不到更好的解决方案，因为 MatAutocompleteTrigger panelClosingActions 是只读的。