Я использовал mat-autocomplete с материалом Angular 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) })
);
}
Он отлично работает с поиском, введя ввод.
Моя проблема в том, что я хочу, чтобы список автоматическизаполнять, не печатая, для некоторых конкретных функций, таких как заполнение списка при загрузке некоторыми элементами.
Может кто-нибудь сказать мне, как я могу это сделать?Как я могу нажать / изменить некоторые элементы в режиме автозаполнения в динамическом режиме?
Ниже приведен HTML-код, в котором я связываю данные
<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>