Question

在我学习angularJS后，我开始学习angular2.2 +。

并且遇到了一个我无法解决的小问题。

我将在html视图中显示一个集合。

获得了一项服务：

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;
    }

}

和这样的组件：

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']);
            }
        }

    }

}

并尝试在html视图中使用它

<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>

但是我无法让它运转起来。我怎样才能使用方法＆＃39; getUserCollection＆＃39;从组件，我怎么能直接在html视图中使用该服务？

问候 n00n

Answer 1

创建一个数组，用于将用户保存在组件中，如下所示，

<强> { a[x]: {str(b[x]): str(c[x])} for x in range(len(a))}

从service insige ngOnInit

中分配值

users: object[];

，模板应该是，

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

Answer 2

我会创建一个名为

的公共属性

userList = [];

然后在ngInit上我会将服务中的数据加载到你的列表中

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

从这一刻起，您只需要在模板中调用它

*ngFor="let user of userList”

Answer 3

另一种方法是将构造函数更改为

constructor(public _userService: UserService) {}

然后在您的模板中，您可以像这样访问users：

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

如果您的服务与其他组件共享，并且您的用户对象是动态的，则此方法尤其有用。

如何在角度中使用服务

3 个答案: