I am facing an issue while trying to retrieve static data from UserService in Angular 2. Although everything seems correct based on the documentation, it is not functioning as expected.
Below is my UserComponent.ts
import {Component ,OnInit } from '@angular/core';
import {UsersService} from './users.service';
@Component({
selector: 'users',
template: `<h3>Users </h3>
<ul>
<li *ngFor="let user of users">{{user}}</li>
</ul>
`,
providers:[UsersService]
})
export class UsersComponent {
users;
title;
construct( usersService: UsersService){
this.users=usersService.getUsers();
// i also tried this but no luck. this.users = this.usersService.getUsers();
}
}
And here is my UsersService.ts
import { Injectable } from '@angular/core';
@Injectable()
export class UsersService {
users =['krishna','ravi','ram','ramesh','sita'];
getUsers() {
return this.users ;
}
}
The expected output should be:
<h3>Users </h3>
<ul>
<li>Krishna</li>
<li>Ravi</li>
<li>Hari</li>
<li>etc</li>
</ul>
However, the *ngFor loop is not working as intended. Printing {{users}} returns empty. Any suggestions on what might be causing this issue would be greatly appreciated.