Поведение mat-autocomplete - не отображать полный список после выбора опции (Angular) - PullRequest
Новая
       5

Поведение mat-autocomplete - не отображать полный список после выбора опции (Angular)

0 голосов
/ 24 марта 2020

Я использую mat-autocomplete в моем проекте Angular 9 вместе с mat-option и пользовательскими каналами. Начальное поведение в порядке:

initial behavior that works fine

Но, выбрав опцию и желая ее изменить, я хочу удалить трубу и показать все опции. Вот проблема:

cant see all the options

Вот мой HTML код: 

<div>
    <mat-label>Port</mat-label>
    <mat-form-field class="mat-select" floatLabel="always" appearance="outline">
      <input
        matInput
        [fieldController]="formGroup.controls['port']"
        formControlName="port"
        [matAutocomplete]="auto"
      />
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of shipToPortsFilteredOptions | async" [value]="option.key"> {{ option.value }} - {{ option.key }} </mat-option>
      </mat-autocomplete>
      <mat-icon matSuffix>expand_more</mat-icon>
      <mat-error> {{ getErrorMessage(formGroup.controls['port']) }} </mat-error>
    </mat-form-field>
  </div>

Вот пользовательский канал: 

 fileOptionSubscribers() {
    this.fileOptionsService.getOptions('ports').subscribe(type => {
      if (type) {
        this.billToPorts = type.data;
        this.shipToPorts = type.data;
      }
    });
  }

  filterOptionPipes() {
    if (this.contactType === 'ShipTo') {
      this.shipToPortsFilteredOptions = this.formGroup.controls.port.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value, this.shipToPorts))
      );
    } else if (this.contactType === 'BillTo') {
      this.billToPortsFilteredOptions = this.formGroup.controls.port.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value, this.billToPorts))
      );
    }
  }


  private _filter(value: string, options: IFileOption[]): IFileOption[] {
    const filterValue = value.toLowerCase();
    return options.filter(option => option.value.toLowerCase().indexOf(filterValue) > -1 || option.key.toLowerCase().indexOf(filterValue) > -1);
  }

Так что в основном я хочу почистить свои фильтры после повторного нажатия на значок расширения (после того, как я выбрал опцию). Заранее спасибо.

...