Question

嗨，我是角色新手，我有问题填充角度4前端表，用户名详细信息，ID名称和姓氏为列。我已经有一个springboot后端，它使用rest来提供用户数据。

api.service.ts

get(path: string, args?: any): Observable<any> {
  const options = {
    headers: this.headers,
    withCredentials: true
  };

  if (args) {
    options['params'] = serialize(args);
  }

  return this.http.get(path, options)
    .catch(this.checkError.bind(this));
}

post(path: string, body: any, customHeaders?: HttpHeaders): Observable<any> {
  return this.request(path, body, RequestMethod.Post, customHeaders);
}

put(path: string, body: any): Observable<any> {
  return this.request(path, body, RequestMethod.Put);
}

delete(path: string, body?: any): Observable<any> {
  return this.request(path, body, RequestMethod.Delete);
}

我然后从我的user.service.ts

调用所有用户

getAll() {
  return this.apiService.get(this.config.users_url);
}

我创建了一个table.component.ts，但我希望这样做的方式不起作用，我不知道为什么。

table.component.ts

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import {
  UserService,
  AuthService
} from '../../service';

@Component({
  templateUrl: './table.component.html',
  styleUrls  : [ './table.scss'],
})

export class TablesComponent implements OnInit {

  columns: any[];
  rows: any[];

  constructor(private router: Router, private userservice: userService) { }

  ngOnInit() {
    let me = this;
    me.getPageData();

    this.columns = [
      {prop: 'id'        , name: 'ID'          , width: 50  },
      {prop: 'firstName' , name: 'First Name'  , width: 120 },
      {prop: 'lastName'  , name: 'Last Name'   , width: 120 }
    ];
  }

  getPageData() {
    let me = this;
    this.userService.getAll().subscribe((data) => {
      this.rows = data.items;
    });
  }

}

然后在我的table.component.html

中使用它

<div class="pad-16">

  <ngx-datatable
    style='width:900px;'
    [rows]="rows"
    [columns]="columns"
    [headerHeight]="45"
    [rowHeight]="'auto'"
    [columnMode]="'standard'"
    [scrollbarV]="false"
  >
  </ngx-datatable>
</div>

我很确定我在这里犯了一个明显的错误，如果它是基本的东西我道歉但我真的很感激一些反馈。

从springboot Rest API创建Angular 4数据表

0 个答案: