Angular Автозаполнение материалов - как выбрать вариант - PullRequest
Новая
       12

Angular Автозаполнение материалов - как выбрать вариант

0 голосов
/ 17 июня 2020

Я использую автозаполнение Angular материала и пытаюсь выбрать значение, используя @Input и элемент управления формой. Почти все работает нормально. Я устанавливаю значение, используя ввод следующим образом: 

@Input() set startingPointValue(value) {
  this.control.setValue(value, { emitEvent: false });
  this.resizeInput();
}

И значение ввода правильно установлено, но когда я открываю автозаполнение, параметр, который должен быть выбран, не имеет класса mat-selected, поэтому в основном там не указывает, какой вариант был выбран, и это сбивает с толку. Когда я снова нажимаю тот же вариант, добавляется класс.

Есть ли способ сделать это с помощью setValue или мне нужно использовать что-то еще?

Это мое автозаполнение HTML: 

<mat-form-field class="starting-point-filter-container">
  <mat-label>{{ label }}</mat-label>
  <input
    id="inputStartingPoint"
    #startingPointInput
    matInput
    placeholder="Type to filter results"
    type="text"
    [formControl]="control"
    [matAutocomplete]="startingPointAutocomplete"
    spellcheck="false"
  />
  <mat-icon class="starting-point-icon--dropdown">arrow_drop_down</mat-icon>
</mat-form-field>

<mat-autocomplete
  #startingPointAutocomplete="matAutocomplete"
  [displayWith]="displayName"
  (opened)="scrollToSelected()"
>
  <perfect-scrollbar class="select-scrollbar" [config]="scrollBarConfig" #scrollFilterContainer>
    <mat-optgroup
      *ngFor="let group of groups"
      [label]="group.name"
      [class.mat-optgroup-no-label]="!group.name"
      class="starting-point-group-container"
      #scrollToContainer
    >
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{ option.id }}
      </mat-option>
    </mat-optgroup>
  </perfect-scrollbar>
</mat-autocomplete>

Любая помощь будет оценена

Изменить: я создал StackBlitz с автозаполнением: https://stackblitz.com/edit/angular-ivy-mqwwky. Вы можете проверить вариант номер 2 после запуска. На нем нет класса .mat-selected. Вам нужно щелкнуть по нему вручную, чтобы установить его правильно. Вопрос в том, как это сделать во время инициализации?

...