保持自动填充建议面板打开以进行多项选择,并在角度材料2中单击面板外部时关闭

Question

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

我可以通过MdAutocompleteTrigger事件和openPanel方法保持Panel打开,但是如果选择第二个索引并且m选择第四个索引然后第二个索引复选框取消并再次打勾,会发生什么.

<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是只读的.

Answer 2

防止自动完成选项的事件传播

在模板中：

<mat-autocomplete>
    <mat-option *ngFor="let option of options">
        <mat-checkbox (click)="checkOption($event)">
            {{ option.name }}
        </mat-checkbox>
    </mat-option>
</mat-autocomplete>

在组件中：

checkOption(event) {
    // this prevents the click event to get to the autocomplete component
    event.stopPropagation();
}

Answer 3

经过大量挖掘后，我发现材料并没有公开其这样做的方法。所以，简而言之，目前还不可能