如何在角度使用服务

Question

after I learned angularJS I start learning angular2.2+.

And got a small problem I cannot solve.

I will display a collection to the html view.

Got a service:

import {Injectable} from '@angular/core';

@Injectable()
export class UserService {

    users: object[];

    constructor() {
        this.users = [
            {
                id: 1,
                name: 'first user'
            },
            {
                id: 2,
                name: 'second user'
            }
        ];
    }

    getUsers() {
        return this.users;
    }

}

and the component like this:

import {Component, OnInit} from '@angular/core';
import {UserService} from './user.service';

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css'],
    providers: [UserService]
})
export class UserComponent implements OnInit {

    constructor(private _userService: UserService) {
    }

    ngOnInit() {
    }

    getUserCollection() {
        return this._userService.getUsers();
    }

    onChange(event) {

        // nun brauche ich einen service dem ich den aktuellen wert zuweisen kann der mir eine liste der user geben kann usw.

        for (const item of this._userService.getUsers()) {
            if (event.source.value === item['id']) {
                console.log(item['id']);
            }
        }

    }

}

and tried to use it in the html view

<mat-form-field>
    <mat-select placeholder="Select User" (change)="onChange($event)">
        <mat-option *ngFor="let user of getUserCollection()" [value]="user.id">
            {{ user.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

But I cannot get it running. How can I use the method 'getUserCollection' from component and how could i directly use the service in the html view?

regards n00n

Answer 1

Create an array which holds your users inside your component as follows,

users: object[];

assign the values from service insige ngOnInit

ngOnInit() {
    this.users = this._userService.getUsers();
}

and the template should be,

 <mat-option *ngFor="let user of users" [value]="user.id">
       {{ user.name }}
 </mat-option>

Answer 2

I would create a public property called

userList = [];

Then on ngInit I would load the data from the service to your list

ngOnInit() {
    this.userList = this._userService.getUsers();
}

From this moment you just need to call it in the template

*ngFor="let user of userList”

Answer 3

Another alternative is to change your constructor to

constructor(public _userService: UserService) {}

then in your template you can access users like this:

<mat-option *ngFor="let user of _userService.users" [value]="user.id">

This approach can especially be useful if your service is shared with other components, and your users object is dynamic.