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

经过深入挖掘后，我发现材料没有暴露其方法。所以，简而言之，它还不可能

Answer 3

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

在模板中：

<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 4

我遇到了与多个自动完成相同的问题。这是我修复它的方法。

HTML：（当我选择一个选项时我想让面板打开的那个）

<mat-autocomplete  #emitterAuto="matAutocomplete" 
                   [displayWith]="autoCompleteDisplayLegalEntity"
                   (optionSelected)="onOptionSelected(0)">
       <mat-option *ngFor="let emitter of aFilteredEmitters$ | async"
                   [value]="emitter"> 
              <mat-icon *ngIf="emitter.is_organization">business</mat-icon>
              <mat-icon *ngIf="!emitter.is_organization">person</mat-icon>
              {{ displayLegalEntity(emitter) }}
      </mat-option>
      <mat-option value="create-legal-entity" class="add-organization">
              <mat-icon>add</mat-icon>Ajouter…
      </mat-option>
</mat-autocomplete>

TS：

import { QueryList, ViewChildren } from '@angular/core';
@ViewChildren(MatAutocompleteTrigger) autoTrigger: QueryList<MatAutocompleteTrigger>;
public onOptionSelected(value: number) {
    const self = this;
    setTimeout(function () {
        self.autoTrigger['_results'][value].openPanel();
    }, 1);
}

值是您要应用此函数的 N mat-autocomplete。

例如：如果要打开第二个mat-autocomplete的面板，value = 1。

希望它可以帮助某人，对不起我的英语我是法国人。

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

4 个答案: