物料角度自动完成：选择一个选项后如何在屏幕上保留该垫选项？

Question

我正在使用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 = '';

          } 
        }

Answer 1

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