Angular mat-autocomplete - динамически выдвигать данные к наблюдаемым без изменения значения на входе - PullRequest
Новая
       28

Angular mat-autocomplete - динамически выдвигать данные к наблюдаемым без изменения значения на входе

0 голосов
/ 30 марта 2019

Я использовал мат-автозаполнение с Angular 7. 

<mat-form-field floatLabel="never">
  <input matInput aria-label="salesRepresentative" type="text" [placeholder]="translationObj.startTypingPlaceholder" autocomplete="off"
    [formControl]="autoCompleteControl" [matAutocomplete]="auto">
  <mat-icon matSuffix class="cursor-pointer">search</mat-icon>
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="createSalesRepString">
    <mat-option *ngFor="let item of salesPickerAutoComplete$ | async;" [value]="item">
      {{item.FirstName}} {{item.LastName}} - (Username: {{item.Username}})
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

И ниже мой код компонента. 

this.salesPickerAutoComplete$ = this.autoCompleteControl.valueChanges.pipe(
  startWith(''),
  debounceTime(400),
  distinctUntilChanged(),
  switchMap(value => {
    if (value && value.length > 2) {
      return this.getSalesReps(value);
    } else {
      return of(null);
    }
  })
);

getSalesReps(value: string): Observable<any[]> {
  const params = new QueryDto;
  params.$filter = `substringof('${value}',FirstName) or substringof('${value}',LastName)`;
  params.$select = "UserId,FirstName,LastName,Username";
  return from(this.salesRepresentativesService.GetSalesRepresentatives(params))
    .pipe(
      map(response => response.Data),
      catchError(() => { return of(null) })
    );
}

Теперь это прекрасно работает с поиском, набрав в поле ввода.

Моя проблема в том, что я хочу, чтобы список автоматически заполнялся при загрузке некоторыми элементами.

Я не уверен, как это сделать с этой структурой.

Может кто-нибудь сказать мне, как я могу это сделать? Как я могу динамически выдвигать / изменять некоторые элементы в автозаполнении mat?

...