如何在Angular中创建数据表

Question

我有一个datatable.net，知道我已经下载了所有库，但它显示没有数据，并且数据显示在表格顶部，如图所示 谁遇到这个问题请帮助我，谢谢

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = './assets/datatables-init.js';
document.body.appendChild(script);

<table id="dataTable" class="display" style="width:100%">
  <tbody>
    <tr *ngFor="let item of items">
      <th scope="row">{{item.code}}</th>
      <td>{{item.barCode}}</td>
      <td>{{item.sn}}</td>
  </tbody>

Answer 1

要在角度组件内创建表格，请创建一个组件

data-table.component.ts

用于存储/获取数据对象

import { Component } from '@angular/core';

interface UserData {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
})
export class DataTableComponent {
  users: UserData[] = [
    { id: 1, name: 'John Doe', email: '[email protected]' },
    { id: 2, name: 'Jane Smith', email: '[email protected]' },
  ];
}

并在

data-table.component.html

中使用这个对象来渲染它

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.id }}</td>
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

您可以在此处找到有关 Angular 项目结构的更多信息

希望这有帮助！