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

发布时间：2020-12-17 06:49:40 所属栏目：安全来源：网络整理

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

我想修改自动完成组件以进行多项选择.
我想要的是应该通过复选框打开建议面板进行多项选择,如果用户在建议面板外单击,则关闭它.根据文档,我们可以通过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();
}

任何帮助都非常感谢

解决方法

我面临同样的问题.

我发现的唯一解决方案是在使用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>

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!