I'm trying to figure out how to get a text box to populate with user's emails from an API call to the server.
select-users.component.html:
<input type="text"
placeholder="Email Search"
aria-label="Email"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>select-users.component.ts
interface User {
email: string;
}
export class SelectUsersComponent implements OnInit {
public userList: User[] = [];
myControl = new FormControl();
// options: string[] = ['clark.kent@mail.com', 'james.t.kirk@mail.com', 'joe.shmo@mail.com'];
options: string[] = [];
filteredOptions: Observable<string[]>;
constructor(private gService: GService) { }
ngOnInit(): void {
this.userSearch().then();
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[]{
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
/**
* Retrieve users from gService
*/
public userSearch = async () => {
const result = await this.gService.getUsers();
this.userList = [];
result?.list?.entries?.forEach(({ entry }) => {
this.userList.push({
email: entry.properties?.['cm:email']
});
});
this.options = this.userList.map(User => User.email);
};
}Where the userSearch function is making a call to a separate gService.getUsers() function that returns an Alfresco-based set of users (this is the API call, which isn't really shown here in the TypeScript code), stores the User objects into the userList, and lastly stores all userList User.email's into the options array.
Now, my problem is that the return function in _filter doesn't return anything at all. I've done a series of tests and the options array populates just fine and the emails look appropriate in print-outs and logs, but the filter isn't sorting (or is dropping?) that array.
Additional oddity: if you take a look at the commented-out version of options, if you comment it back in and run the program you actually get results from _filter just as you would expect to.
So I'm kind of at a loss - am I storing the emails in the options array wrong?