Question

我目前正在尝试在我的项目中使用angular2-datatable（来自：https://www.npmjs.com/package/angular2-datatable），当我使用静态.json文件执行简单版本时，它可以正常工作。但是，当我尝试针对我的WebAPI实现此操作时，它实际上并未显示组件中的数据。

在我的组件中，我有以下内容：

＆＃13;

export class CurrentusersComponent implements OnInit {

  public data;
  public filterQuery = "";
  public rowsOnPage = 10;
  public sortBy = "username";
  public sortOrder = "asc";

  currentusers: Currentuser[];


  constructor(private _http: Http, private _currentusersservice: CurrentusersService) {}

  ngOnInit() {
    //this loadCurrentUsersStatic works!
    this.loadCurrentUsersStatic();

    //this loadCurrentUsersNonObservable Does not :(
    this.loadCurrentUsersNonObservable();
  }

  loadCurrentUsersStatic() {
    this._http.get("app/auth/sampledata/currentusers.json")
      .subscribe((data) => {
        setTimeout(() => {
          this.data = data.json();
          console.log('getting data from a static file');
        }, 1000);
      }, );
  }

  loadCurrentUsersNonObservable() {
    this._currentusersservice.getCurrentUsers().subscribe(
      data => {
        setTimeout(() => {
          this.data = data;
          console.log(data);
        }, 1000);
      }
    );
  }

＆＃13;

这是组件模板的样子：

＆＃13;

<div class="panel panel-default">
  <div class="panel-heading">User information</div>

  <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
    <thead>
      <tr>
        <th style="width: 20%">
          <mfDefaultSorter by="username">User Name</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="logintime">Login Time</mfDefaultSorter>
        </th>
        <th style="width: 25%">
          <mfDefaultSorter by="sessionkey">Session Key</mfDefaultSorter>
        </th>
        <th style="width: 25%">
          <mfDefaultSorter by="currentpage">Current Page</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="browser">Browser</mfDefaultSorter>
        </th>
        <th style="width: 5%">
          <mfDefaultSorter by="status">Status</mfDefaultSorter>
        </th>
        <th style="width: 5%">Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data">
        <td>{{item.username}}</td>
        <td>{{item.logintime}}</td>
        <td>{{item.sessionkey}}</td>
        <td>{{item.currentpage}}</td>
        <td>{{item.browser}}</td>
        <td>{{item.status}}</td>
        <td></td>
      </tr>
    </tbody>

＆＃13;

我的currentusersservice如下所示：

＆＃13;

@Injectable()
export class CurrentusersService {

  public data;
  constructor(private _http: Http, private _cookieService: CookieService) {}

  getCurrentUsers() {
    return this._http.get('http://localhost:8888/api/currentusers')
      .map((response: Response) => response.json())
      .map(body => body.Data);
  }

＆＃13;

当我查看最终结果时，我得到以下结果：

请注意，在控制台中，我将许多记录视为对象，甚至表中也填充了许多行。因此，我认为我在将数据输入屏幕方面遗漏了一些东西。

提前致谢！

Answer 1

所以看起来ngFor / access json是区分大小写的：p

当我更改模板以循环访问这些调用时，数据变得可访问：

<tr *ngFor="let item of mf.data">
  <td>{{item.USERNAME}}</td>
  <td>{{item.LOGINTIME}}</td>
  <td>{{item.SESSIONKEY}}</td>
  <td>{{item.CURRENTPAGE}}</td>
  <td>{{item.BROWSER}}</td>
  <td>{{item.STATUS}}</td>
  <td></td>
</tr>

当我看到对象的细节被标记为全部大写时，我应该意识到这一点......

从webapi填充angular2-datatable

1 个答案: