Question

我正在开发一个Angular 2应用程序。我有一个名为Home的模块。该模块有一个名称相同的组件。

HomeModule.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { Routes, RouterModule } from '@angular/router/';
import { DataTablesModule } from 'angular-datatables';

const routes: Routes = [
  {
    path : '',
    component : HomeComponent,
  },
];

@NgModule({
  imports: [
   CommonModule, 
   RouterModule.forChild(routes),
   DataTablesModule
 ],
 declarations: [HomeComponent]
})
export class HomeModule { }

HomeComponent.ts：

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

@Component({
  selector: 'dr-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
      data: 
        [
          {
            "id": 860,
            "firstName": "Superman",
            "lastName": "Yoda"
          },
        ],
      columns: 
        [
          {
            title: 'ID',
            data: 'id'
          }, {
            title: 'First name',
            data: 'firstName'
          }, {
            title: 'Last name',
            data: 'lastName'
          }
        ]
    };
  }
}

HomeComponent.html：

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

我需要在HomeComponent.html中添加一个按钮，以便在我的数据表中添加动态行。我怎么能这样做？

提前致谢。大卫。

Answer 1

您需要在表格内构建实际数据。你可以用......之类的东西来做到这一点。

HomeComponent.html

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <tbody>
    <tr *ngFor="let row or dataRows">
      <td>id</td>
      <td>name</td>
    </tr>
  </tbody>
</table>

<input [(ngModel)]="input.id"></input>
<input [(ngModel)]="input.name"></input>
<button (click)="saveInput()">save</button>

和HomeComponent.ts

public dataRows = [];
public input = {};

saveInput() {
  this.dataRows.push({id: this.input.id, name: this.input.name});
  this.input = {};
}

Answer 2

使用下面的CMD简单即可生成数据表

ng generate @angular/material:material-table --name=data-table

在角度组件中创建数据表

2 个答案: