I am facing an issue with populating a simple HTML list using Angular. The problem arises when trying to display the data in the list. When I use
console.log("getUserCollection() Data: ", data);console.log("getUser() Data: ", data);This is my Users.component.ts:
import { Component, OnInit } from '@angular/core';
import { AviorBackendService } from '../services/avior-backend.service';
import { UserCollection } from '../models/user-collection.model';
import { User } from '../models/user.model';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
selectedItem: string;
users: UserCollection;
user: User;
firstname: string;
selectedUser: User;
constructor(private aviorBackend: AviorBackendService) { }
ngOnInit() {
this.aviorBackend.getUserCollection().subscribe(data => {
// tslint:disable-next-line: no-string-literal
this.users = data['firstname'];
console.log(this.users);
console.log("getUserCollection() Data: ", data);
});
}
clickItem(firstname) {
this.aviorBackend.getUser(firstname).subscribe(data => {
// tslint:disable-next-line: no-string-literal
this.selectedUser = data['user'];
console.log(this.selectedUser);
console.log("getUser() Data: ", data);
});
}
}
This is my Users.component.html:
<div class="list-area">
<div class="col-lg-12">
<p class="list-header">Element overview</p>
<div class="form-group">
<label for="filter" class="lb-sm">Filter</label>
<input type="text" class="form-control input-sm" name="filter" id="filter">
</div>
<select size="20" multiple class="form-control" id="elementlist" [(ngModel)]="selectedItem" (click)="clickItem(firstname)">
<!-- maybe add | async pipe -->
<option *ngFor="let user of users">
{{user?.lastName}}, {{user?.firstName}}
</option>
</select>
</div>
</div>
<div class="content-area">
<div class="col-lg-12" *ngIf="selectedUser?.id">
<p>Element contents {{selectedUser?.id}}</p>
<div class="col-lg-12">
<div class="form-group">
<label for="firstName" class="lb-sm">First Name</label>
<input type="text" class="form-control input-sm" name="firstName" id="firstName" [(ngModel)]="selectedUser.firstName">
</div>
</div>
</div>
</div>
Update This is my getUser() method:
// Get user
getUser(firstname: string): Observable<any> {
const API_URL = `${SERVICE_URL}user/firstname/${firstname}`;
return this.client.get(API_URL, this.httpOptions).pipe(
map((res: Response) => {
return res || {};
}),
catchError(this.handleError())
);
}
UPDATE 2
This is my user.model.ts:
import { Role } from './role';
// Modified from class to interface!
export interface User {
id?: number;
mandator?: number;
loginId?: string;
lastName?: string;
firstName?: string;
password?: string;
eMail?: string;
group: string;
role: Role;
active?: boolean;
token?: string;
}
This is my user-collection.model.ts:
import { User } from './user.model';
export interface UserCollection {
user: User[];
}