SmartAdmin DataTables - 如何从 component.ts 导入 ajax 数据

Question

我正在使用 SmartAdmin Angular 5 模板来呈现 DataTable。我修改为 LoginHistory 的 SmartAdmin 数据表示例从存储在 Web 应用程序中的 JSON 文件获取其 ajax 数据，如下所示。这工作正常。但是，如何修改它以从 component.ts 中定义的字符串中获取其数据？

loginhistory.component.html

<div id="content">

  <div class="row">
    <sa-big-breadcrumbs [items]="['Table', 'Data Tables']" icon="table"
                        class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>

  <sa-widgets-grid>
    <div class="row">
      <article class="col-sm-12">
        <div sa-widget [editbutton]="false" color="blueDark">
          <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>Export to PDF / Excel</h2>
          </header>
          <div>
            <div class="widget-body no-padding">

              <sa-datatable
                [options]="{
                  ajax: '../../assets/api/tables/datatables.standard.json', // <<<<<<< HOW TO USE loginHistoryData FROM loginhistory.component.ts????
                  columns: [
                  {data: 'id'},
                  {data: 'name'},
                  {data: 'phone'},
                  {data: 'company'},
                  {data: 'zip'},
                  {data: 'city'},
                  {data: 'date'}
                  ],
                  buttons: [
                    'copy', 'excel', 'pdf', 'print'
                  ]
                }"
                tableClass="table table-striped table-bordered table-hover"
              >
                <thead>
                <tr>
                  <th data-hide="mobile-p">ID</th>
                  <th data-class="expand">Name</th>
                  <th>Phone</th>
                  <th data-hide="mobile-p">Company</th>
                  <th data-hide="mobile-p,tablet-p">Zip</th>
                  <th data-hide="mobile-p,tablet-p">City</th>
                  <th data-hide="mobile-p,tablet-p">Date</th>
                </tr>
                </thead>
              </sa-datatable>

            </div>
          </div>
        </div>
      </article>
    </div>
  </sa-widgets-grid>
</div>

loginhistory.component.ts

import { Component, OnInit } from '@angular/core';
import { FadeInTop } from "../../shared/animations/fade-in-top.decorator";

@FadeInTop()
@Component({
  selector: 'sa-datatables-case',
  templateUrl: './loginhistory.component.html',
})
export class LoginHistoryComponent implements OnInit {
  public loginHistoryData: any;

  constructor() {}

  ngOnInit() {  
    this.loginHistoryData =
          + '{'
          + '  "data": ['
          + '    {'
          + '      "id": "1",'
          + '      "name": "Jennifer",'
          + '      "phone": "1-342-463-8341",'
          + '      "company": "Et Rutrum Non Associates",'
          + '      "zip": "35728",'
          + '      "city": "Fogo",'
          + '      "date": "03/04/14"'
          + '    },'
          + '    {'
          + '      "id": "2",'
          + '      "name": "Clark",'
          + '      "phone": "1-516-859-1120",'
          + '      "company": "Nam Ac Inc.",'
          + '      "zip": "7162",'
          + '      "city": "Machelen",'
          + '      "date": "03/23/13"'
          + '    },'
          + '  ]'
          + '}';
  }
}

Answer 1

一点点试错就解决了这个问题。只需要将ajax标签改为data，并包含component.ts参数的名称即可。

我还使用打字稿命名法而不是字符串来清理 loginHistoryData 参数。

loginhistory.component.html

<div id="content">

  <div class="row">
    <sa-big-breadcrumbs [items]="['Table', 'Data Tables']" icon="table"
                        class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>

  <sa-widgets-grid>
    <div class="row">
      <article class="col-sm-12">
        <div sa-widget [editbutton]="false" color="blueDark">
          <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>Export to PDF / Excel</h2>
          </header>
          <div>
            <div class="widget-body no-padding">

              <sa-datatable
                [options]="{
                  data: loginHistoryData, //<<<< change ajax to data and add the name of the component.ts parameter
                  columns: [
                  {data: 'id'},
                  {data: 'name'},
                  {data: 'phone'},
                  {data: 'company'},
                  {data: 'zip'},
                  {data: 'city'},
                  {data: 'date'}
                  ],
                  buttons: [
                    'copy', 'excel', 'pdf', 'print'
                  ]
                }"
                tableClass="table table-striped table-bordered table-hover"
              >
                <thead>
                <tr>
                  <th data-hide="mobile-p">ID</th>
                  <th data-class="expand">Name</th>
                  <th>Phone</th>
                  <th data-hide="mobile-p">Company</th>
                  <th data-hide="mobile-p,tablet-p">Zip</th>
                  <th data-hide="mobile-p,tablet-p">City</th>
                  <th data-hide="mobile-p,tablet-p">Date</th>
                </tr>
                </thead>
              </sa-datatable>

            </div>
          </div>
        </div>
      </article>
    </div>
  </sa-widgets-grid>
</div>

loginhistory.component.ts

import { Component, OnInit } from '@angular/core';
import { FadeInTop } from "../../shared/animations/fade-in-top.decorator";

@FadeInTop()
@Component({
  selector: 'sa-datatables-case',
  templateUrl: './loginhistory.component.html',
})
export class LoginHistoryComponent implements OnInit {
  public loginHistoryData: any;
  constructor() {}

  ngOnInit() {  
    this.loginHistoryData = [
        {
        "id": "1",
        "name": "Jennifer",
        "phone": "1-342-463-8341",
        "company": "Et Rutrum Non Associates",
        "zip": "35728",
        "city": "Fogo",
        "date": "03/04/14"
        },
        {
        "id": "2",
        "name": "Clark",
        "phone": "1-516-859-1120",
        "company": "Nam Ac Inc.",
        "zip": "7162",
        "city": "Machelen",
        "date": "03/23/13"
        }
    ];
  }
}