添加或删除芯片后如何保持芯片列表自动完成建议打开？

Question

在 Angular 中，我制作了一个自动完成的芯片列表组件。当用户选择删除或添加项目时，建议列表消失，输入字段为空。

我想保持自动完成列表打开（或重新打开），而不是这种行为，这样用户就不需要通过在输入字段中键入来触发它。

所以目前自动完成功能是在用户开始输入的那一刻打开的；

芯片列表.component.ts

constructor() {
  this.filteredItems = this.itemCtrl.valueChanges.pipe(
    map((item: string | T) => {
      if (typeof item === 'string') {
        return this._filter(item);
      }
      return this.allItems.filter(
        (x) => this.selectedItems.indexOf(x) === -1
      );
    })
  );
}

芯片列表.component.html

<mat-form-field [formGroup]="group" class="mat-form-field-prefix">
  <mat-chip-list #chipList aria-label="Item selection">
    <mat-icon *ngIf="iconName" matPrefix>{{ iconName }}</mat-icon>
    <mat-chip
      *ngFor="let item of selectedItems"
      [selectable]="false"
      [removable]="true"
      (removed)="remove(item)"
      (click)="remove(item)"
    >
      {{ this.getItemName(item) }}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input
      matInput
      placeholder=""
      #itemInput
      (click)="itemCtrl.valueChanges.emit()"
      [formControl]="itemCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      class="mat-form-field-infix"
    />
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option
      *ngFor="let item of filteredItems | async"
      [value]="item"
    >
      {{ this.getItemName(item) }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Answer 1

openPanel() 的调用函数。 #operationTrigger 将此引用命名为您想要的任何名称。

<input
      matInput
      placeholder=""
      #itemInput
      #operationTrigger="matAutocompleteTrigger"
      (click)="itemCtrl.valueChanges.emit()"
      [formControl]="itemCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      class="mat-form-field-infix"
    />

并在 ma​​t-autocomplete 中的 ma​​t-option 中调用这样的点击函数。

(click)="operationTrigger.openPanel()"

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option
      *ngFor="let item of filteredItems | async"
      [value]="item"
      (click)="operationTrigger.openPanel()">
      {{ this.getItemName(item) }}
    </mat-option>
  </mat-autocomplete>

希望对你有用。