Question

我是Angular的新手。我有一个简单的任务来从web api获取用户列表并在视图中显示它。数据以[object Object]，[object Object]的格式返回，但它没有在网格中显示。请参阅以下代码：

user.service.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);
}
}

user.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);
    }
    );       
  }
}

user.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上的输出

https://i.stack.imgur.com/rlP64.png

Angular中的Grid中没有填充数据

0 个答案: