Angular2从web api获取数据不显示

Question

我是 angular2 的新手，我正在尝试使用我的 angular2 应用程序从 web api 获取数据。我正在使用 Visual Studio 2015。我没有错误，但数据只是不显示，我应该让所有用户登录显示在我的 html 页面上，但它是空的，但它显示了正确数量的现有登录，这是结果：

我的组件：

import { Component } from "@angular/core";
import { Http, Response } from "@angular/http";

@Component({
    selector: "team",
    templateUrl: "../Scripts/components/team/team.component.html"
})
export class TeamComponent {
    public users: IUserID[];
    private _userIdUrl = "http://localhost:61142/api/UserID";
    constructor(private http: Http) {
        http.get(this._userIdUrl).subscribe(result => {
            this.users = result.json();
        });
    }
}

interface IUserID {
    Login: string;
}

和我的控制器：

 [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class UserIDController : ApiController
    {
        IUserIDBusiness userIDBusiness;

        public UserIDController()
        {
            userIDBusiness = WebApiConfig.userIDBusiness;
        }

        public IEnumerable<UserID> Get()
        {
            return userIDBusiness.GetAll();
        }

[编辑] html：

<ul>
    <li *ngFor="let user of users">
        {{ user.Login }}
    </li>
</ul>

我错过了什么？

Answer 1

对此更好的方法是实际创建一个服务，您可以在其中进行 http 调用，而不是在构造函数中进行调用。

首先创建一个如下所示的服务：

import { Injectable } from "@angular/core";
import { Http, Response } from '@angular/http';
import 'rxjs/operator/map';

@Injectable()
export class UserService extends ServiceBase {
    private _userIdUrl = "http://localhost:61142/api/";

     getUserData(userId: number) {
     return http.get(`this._userIdUrl/${userId}`)
        .map((response: Response) => response.json());
     }
}

创建服务后，您应该将其注入到您的组件中（据说您在 app.module 提供程序中注册了该服务）

如果您不知道如何注册您的服务，请阅读更多关于 services 的信息。

那么您的组件将如下所示：

import { Component } from "@angular/core";
import { UserService } from '..' // import the service where you stored it.

@Component({
    selector: "team",
    templateUrl: "../Scripts/components/team/team.component.html"
})
export class TeamComponent implements OnInit {
    public users: IUserID[];
    constructor(private _userService: UserService) {
    }
}

ngOnInit() {
    this._getUserData();
}

private _getUserData() {
    this._userService.getUserData(userId) // pass the userId here. you can get it from the router params or somewhere else.
        .subscribe(response => {
            if(response){
                this.users = <IUserID>response.json();
            }
        },
        error => console.log(error)) // handle errors the way you like.
}

interface IUserID {
    Login: string;
}

您会看到，通过采用这种方法，您抽象了从服务器获取数据的方式，而您的组件不知道或不关心如何获取数据，这很好，因为这意味着您解构了从服务器获取数据的逻辑组件。（更不用说组件中的代码变得更干净了）

Answer 2

将{{ users.Login }} 更改为{{ user.Login }}