Angular 使用角度材质创建常规数据表

我想创建可重用的角度材料数据表，它可以被任何组件使用，只需要传递所需的列标题和其他表数据。以下是我尝试过的：

我举这个例子：

在

src/app

文件夹中创建了

shared

文件夹。和数据表组件，这将是可重用的

数据表.component.html:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnHeader[tableData]}} </th>
        <td mat-cell *matCellDef="let element; let i=index;"> {{element[tableData]}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader)"></tr>
    <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);"></tr>
</table>

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.scss']
})
export class DataTableComponent implements OnInit {

  @Input() tableData;
  @Input() columnHeader;
  @Input() source;
  objectKeys = Object.keys;
  dataSource;

  @ViewChild(MatSort, { static: false }) sort: MatSort;
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

  constructor() { }

  ngOnInit() {
    console.log(this.tableData);
    this.dataSource = new MatTableDataSource(this.tableData);
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

<app-data-table [tableData]="tableData" [columnHeader]="columnHeader"></app-data-table>

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ProfileSetUp } from 'src/app/_interface/profile-setup.module';

@Component({
  selector: 'app-profile-setup',
  templateUrl: './profile-setup.component.html',
  styleUrls: ['./profile-setup.component.scss']
})


export class ProfileSetupComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  columnHeader = {'profileName': 'Profile Name', 'profileDesc': 'Description', 'adminUser': 'Admin User', 'id': ''};

  tableData: ProfileSetUp[] = [
    {
      id: 1,
      profileName: "Cameron Villams",
      profileDesc: "Face to face contact",
      adminUser: "Iwan Rynders",
      action: ""
    },
    {
      id: 2,
      profileName: "Charl Angle",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 3,
      profileName: "Johan Abraham",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 4,
      profileName: "Niekie Gadgilly",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 5,
      profileName: "Veer S",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    }
  ];    
}

export interface ProfileSetUp {
    id: number;
    profileName: string;
    profileDesc: string;
    adminUser: string;
    action: string;
}

现在我正在使用

app data table

选择器。我有一个配置文件组件，我想在其中使用它

profile setup.component.html:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnHeader[tableData]}} </th>
        <td mat-cell *matCellDef="let element; let i=index;"> {{element[tableData]}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader)"></tr>
    <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);"></tr>
</table>

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.scss']
})
export class DataTableComponent implements OnInit {

  @Input() tableData;
  @Input() columnHeader;
  @Input() source;
  objectKeys = Object.keys;
  dataSource;

  @ViewChild(MatSort, { static: false }) sort: MatSort;
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

  constructor() { }

  ngOnInit() {
    console.log(this.tableData);
    this.dataSource = new MatTableDataSource(this.tableData);
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

<app-data-table [tableData]="tableData" [columnHeader]="columnHeader"></app-data-table>

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ProfileSetUp } from 'src/app/_interface/profile-setup.module';

@Component({
  selector: 'app-profile-setup',
  templateUrl: './profile-setup.component.html',
  styleUrls: ['./profile-setup.component.scss']
})


export class ProfileSetupComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  columnHeader = {'profileName': 'Profile Name', 'profileDesc': 'Description', 'adminUser': 'Admin User', 'id': ''};

  tableData: ProfileSetUp[] = [
    {
      id: 1,
      profileName: "Cameron Villams",
      profileDesc: "Face to face contact",
      adminUser: "Iwan Rynders",
      action: ""
    },
    {
      id: 2,
      profileName: "Charl Angle",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 3,
      profileName: "Johan Abraham",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 4,
      profileName: "Niekie Gadgilly",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 5,
      profileName: "Veer S",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    }
  ];    
}

export interface ProfileSetUp {
    id: number;
    profileName: string;
    profileDesc: string;
    adminUser: string;
    action: string;
}

配置文件设置。模块：

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnHeader[tableData]}} </th>
        <td mat-cell *matCellDef="let element; let i=index;"> {{element[tableData]}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader)"></tr>
    <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);"></tr>
</table>

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.scss']
})
export class DataTableComponent implements OnInit {

  @Input() tableData;
  @Input() columnHeader;
  @Input() source;
  objectKeys = Object.keys;
  dataSource;

  @ViewChild(MatSort, { static: false }) sort: MatSort;
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

  constructor() { }

  ngOnInit() {
    console.log(this.tableData);
    this.dataSource = new MatTableDataSource(this.tableData);
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

<app-data-table [tableData]="tableData" [columnHeader]="columnHeader"></app-data-table>

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ProfileSetUp } from 'src/app/_interface/profile-setup.module';

@Component({
  selector: 'app-profile-setup',
  templateUrl: './profile-setup.component.html',
  styleUrls: ['./profile-setup.component.scss']
})


export class ProfileSetupComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  columnHeader = {'profileName': 'Profile Name', 'profileDesc': 'Description', 'adminUser': 'Admin User', 'id': ''};

  tableData: ProfileSetUp[] = [
    {
      id: 1,
      profileName: "Cameron Villams",
      profileDesc: "Face to face contact",
      adminUser: "Iwan Rynders",
      action: ""
    },
    {
      id: 2,
      profileName: "Charl Angle",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 3,
      profileName: "Johan Abraham",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 4,
      profileName: "Niekie Gadgilly",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    },
    {
      id: 5,
      profileName: "Veer S",
      profileDesc: "Face to face contact",
      adminUser: "Unknown",
      action: ""
    }
  ];    
}

export interface ProfileSetUp {
    id: number;
    profileName: string;
    profileDesc: string;
    adminUser: string;
    action: string;
}

---

如何有条件地显示数据？例如，有些数据表可能有“编辑”、“删除”按钮，有些数据表没有这些按钮。任何帮助都将不胜感激。

可以向表组件传递回调函数。（更新项目：）

DataTableComponent

为按钮添加输入和调用

  @Input() editButton;

  onEdit(element) {
    this.editButton(element);
  }

数据表.component.html

<app-data-table [tableData]="tableData" [columnHeader]="columnHeader" [editButton]="onEditClick"></app-data-table>

添加逻辑以添加用于编辑回调的按钮

<div *ngIf="columnHeader[tableData] != 'Edit'">
      <td mat-cell *matCellDef="let element"> {{element[tableData] }}</td>
</div>
<div *ngIf="columnHeader[tableData] == 'Edit'">
  <td mat-cell *matCellDef="let element"> 
      <button mat-button (click)="onEdit(element)">
        edit
      </button> 
  </td>
</div>

  onEditClick = (element) => this.onEdit(element);

  onEdit(element) {
    console.log(element);
  }

为回调创建一个方法

<div *ngIf="columnHeader[tableData] != 'Edit'">
      <td mat-cell *matCellDef="let element"> {{element[tableData] }}</td>
</div>
<div *ngIf="columnHeader[tableData] == 'Edit'">
  <td mat-cell *matCellDef="let element"> 
      <button mat-button (click)="onEdit(element)">
        edit
      </button> 
  </td>
</div>

  onEditClick = (element) => this.onEdit(element);

  onEdit(element) {
    console.log(element);
  }

employee.component.html

<app-data-table [tableData]="tableData" [columnHeader]="columnHeader" [editButton]="onEditClick"></app-data-table>

你能为此创建stackblitz吗？@Ininiv这是我提到的：@Ininiv你得到了吗？@Ininiv嘿，你能帮忙吗？