材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?

Posted

技术标签:

【中文标题】材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?【英文标题】:Material angular auto complete: how to remains the mat-option in the screen after selecting an option? 【发布时间】:2019-07-11 21:40:17 【问题描述】:

我正在使用Material auto complete angular。 在我的mat-option 列表中选择一个选项后,我的mat-options 隐藏。选择后我需要保留选项。显示问题的 GIF:

我的html

<div class="col-xl-6 margemColunas">
    <label>Anunciaremos nas contas *</label>
     <input class="form-control inputContasB2W"
          #inputContasB2W
          [formControl]="contasB2WControl"
          [matAutocomplete]="auto"
          (matChipInputTokenEnd)="add($event)">
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, i)">
        <mat-option *ngFor="let contaB2W of contasFiltradas | async" [value]="contaB2W">
          contaB2W
        </mat-option>
      </mat-autocomplete>
</div>

<div class="col-xl-6 alinhaChips">
  <mat-chip-list>
    <mat-chip
    *ngFor="let contaB2W of produto.contasAnunciarB2W; let j = index"
    [selectable]="selected"
    [removable]="removable"
    (removed)="removeTag(i, j)">
    contaB2W
    <mat-icon matChipRemove><i class="fa fa-close"></i></mat-icon>
  </mat-chip>
  </mat-chip-list>
</div>

我的 ts:

constructor()
    this.contasFiltradas = this.contasB2WControl.valueChanges.pipe(
      startWith(null),
      map((nomeConta: string | null) => nomeConta ? this._filter(nomeConta) : this.contasB2W.slice()));


  private _filter(value: string): string[] 
    const filterValue = value.toLowerCase();
    return this.contasB2W.filter(conta => conta.toLowerCase().indexOf(filterValue) === 0);
  

selected(event: MatAutocompleteSelectedEvent, index: number): void 

 this.produtosConfirmadosAnuncio[index].contasAnunciarB2W.push(event.option.viewValue);

    this.inputContasB2W.nativeElement.value = '';

           
        

【问题讨论】:

停止事件传播可能会做到这一点。尝试在selected 方法中调用event.stopPropagation(); @GCSDC - MatAutocompleteSelectedEvent 没有 stopPropagation。该怎么做? 我想你可以使用event.preventDefault 【参考方案1】:

我使用了blur() 的解决方法,然后再次输入focus()

在ts中:

@ViewChild('inputContasB2W') autocompleteInput: ElementRef;

selected(event: MatAutocompleteSelectedEvent) 
  [..do your stuff...]

  this.autocompleteInput.nativeElement.blur();
  setTimeout(() => 
      this.autocompleteInput.nativeElement.focus();
    , 100
  );

如果要保留输入文本,则必须将其保存在 _filter() 中并在 blur() 之前再次设置值,例如 this.contasB2WControl.setValue(this.lastFilterValue);

【讨论】:

【参考方案2】:
<mat-form-field>
      <input
        matInput
        placeholder="New fruit..."
        #input
        #trigger="matAutocompleteTrigger" // <-- get trigger ref
        [formControl]="control"
        [matAutocomplete]="auto"
      />
      <mat-autocomplete
        #auto="matAutocomplete"
        (optionSelected)="selected($event)"
      >
        <mat-option
          *ngFor="let option of filteredOptions | async"
          [value]="option"
          (click)="$event.stopPropagation(); trigger.openPanel()" // <-- use it here
        >
           option 
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

【讨论】:

这不会阻止选项面板关闭。如果您在 &lt;mat-autocomplete&gt; 上使用 (optionSelected),它也不会在 Angular 12/Material 12 中重新打开它。即使没有,它也只能在第一次使用......

以上是关于材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?的主要内容,如果未能解决你的问题,请参考以下文章

方法在角度材料自动完成中被多次调用

我应该如何在角度材料中实现多项选择选项?

如何更改角度材料中选定选项卡的下划线颜色?

带有对象的角度材质多选选项

角度材料自动完成力选择不起作用

从角度 8 的导航栏中选择一个选项后,如何使侧面导航保持不变并且内容单独消失?