I have a problem filling a Users autocomplete on first load.
This is my UsersService
:
public users: User[] = [];
constructor(private http: HttpClient) {
this.http.get<User[]>(environment.apiUrl + URLS.USERS).subscribe({
next: (res) => {
this.Users = res;
},
error: (err) => {
console.log(err);
},
});
}
filterUsers(val: string) {
return this.users.filter(
(user) =>
user.name.toLowerCase().includes(val.toLowerCase())
);
}
I get Users[]
on the service constructor because this.users
is going to be used by multiple components.
On the other hand I have a component as following:
constructor(
private fb: FormBuilder,
public userService: UsersService) {
this.form = this.fb.group({
user: this.user = this.fb.control('')
});
this.filteredUsers = this.user.valueChanges.pipe(
startWith(''),
map((value: string) => this.userService.filterUsers(value))
);
}
And the view:
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>User</mat-label>
<input type="text" matInput formControlName="user" [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [panelWidth]="'auto'">
<mat-option *ngFor="let sp of filteredUsers | async" [value]="sp.name">
{{sp.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
The problem: on first load,filterUsers
is executed before the http GET request is completed, so this.users
is null and nothing is returned. The autocomplete is empty when focusing.
If I type anything then this.users
already has value and the list is correctly displayed.
How can I set values on my autocomplete on first load?
Finally solved with observables:
Service:
public users: User[] = [];
private subj = new BehaviorSubject('');
userObs = this.subj.asObservable();
constructor(private http: HttpClient) {
this.http.get<User[]>(environment.apiUrl + URLS.USERS).subscribe({
next: (res) => {
this.Users = res;
this.subj.next('ok');
},
error: (err) => {
console.log(err);
},
});
}
Component:
ngOnInit(): void {
this.userService.userObs.subscribe(x => { if (x == "ok") this.user.updateValueAndValidity(); });
}