角度:动态地将数据推送到可观察的状态，而无需更改输入值 [英] Angular : Dynamically push data to observable without changing value in input

问题描述

我已经在Angular材质7中使用了mat-autocomplete.

I have used mat-autocomplete with Angular material 7.

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) })
    );
}

通过输入输入内容，它可以与搜索完美配合.

It works perfectly with search by typing in an input.

我的问题是我希望列表自动填充而无需键入某些特定功能，例如使用某些项目填充列表.

My issue is I want the list to auto-populate without typing for some specific functionalities like populate list on-load with some items.

谁能告诉我我该怎么做?如何动态推动/更改垫子自动完成功能中的某些项目?

Can anyone tell me how I can do that? How can I push/change some items in mat-autocomplete dynamically?

下面是绑定数据的HTML

Below is HTML in which I am binding data

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

推荐答案

要设置默认值，您需要在输入字段中设置一个值.

To set default value you need to set a value to your input field.

<input matInput aria-label="salesRepresentative" type="text" [placeholder]="translationObj.startTypingPlaceholder" autocomplete="off"
    [formControl]="autoCompleteControl" [matAutocomplete]="auto" [(ngModel)]="selectedValue">

示例:

https://stackblitz.com/edit/angular-kmffbi

这篇关于角度:动态地将数据推送到可观察的状态，而无需更改输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！