angular - 数据未填充到 Angular 的网格中

Question

我是 Angular 的新手。我有一个简单的任务是从 web api 获取用户列表并将其显示在 View 中。数据以 [object Object],[object Object] 的格式返回，但未在网格中显示。请看下面的代码:

用户服务.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Observable, Subject } from 'rxjs/Rx';
import { Userdetail } from './user';

@Injectable()
export class UserService {
  private baseUrl: string = "http://localhost:54255/api/";

 constructor(private _http: Http) {

 }

 public LoadData(): Promise<Userdetail[]> {
return this._http.get(this.baseUrl + "getusers")
  .toPromise()
  .then(response =>{return response.json() as Userdetail[]})
  .catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}

用户.component.ts

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

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

  constructor(private _userService: UserService) {
  }

  ngOnInit() {
    this.refresh();
  }

  refresh() {
    this._userService.LoadData().then(data => {
      this.Users = data;
      console.log(this.Users);
    }
    );       
  }
}

用户.component.html

<table class="table">
  <tr> 
     <td>User Name</td>
     <td>Email</td>
     <td>Gender</td>     
  </tr>
  <tr *ngFor="let user of Users">
      <td>{{user.userName}}</td>
     <td>{{user.email}}</td>
     <td>{{user.gender}}</td>  
  </tr>
</table>
{{Users}}

下面是UI上的输出

/image/rlP64.png 

Answer 1

 <td>{{user.userName}}</td>
 <td>{{user.email}}</td>
 <td>{{user.gender}}</td>

应该是

 <td>{{user.UserName}}</td>
 <td>{{user.Email}}</td>
 <td>{{user.Gender}}</td>

你也可以试试

 <td>{{user | json}}</td>

查看user变量的实际内容是什么。