Question

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

任何帮助将不胜感激

编辑：我使用自动完成功能https://stackblitz.com/edit/angular-ivy-mqwwky创建了StackBlitz。您可以在初始化后检查选项2。上面没有类.mat-selected。您需要手动单击它才能正确设置。问题是在初始化期间该怎么做？

角材料自动完成-如何选择选项

0 个答案: