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

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

Answer 2

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

首先创建一个看起来像这样的服务：

r
    WHERE WEEKDAY('2017-03-23') BETWEEN dayFrom AND dayTo 
    AND (timeFrom <= '05:30:00' OR timeTo >= '07:30:00')

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

如果您不知道如何注册服务，请详细了解services。

然后你的组件看起来像这样：

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

您可以看到，通过采用这种方法，您可以抽象出从服务器获取数据的方式，并且您的组件不知道或不关心如何获取数据，这很好，因为这意味着您解释了逻辑以从中获取数据组件。（更不用说组件中的代码更清晰了）