在代码中设置数据为空时的处理方式

首先，要在组件中定义表格需要显示的数据和列的标题等属性，以及在ngOnInit生命周期钩子函数中赋值。如果数据为空，则需要在模板中对此情况进行判断，具体示例代码如下：

组件：

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

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

  // 表格数据
  rows: any[] = [];

  // 表格列的配置
  columns: any[] = [
    { name: 'Name', prop: 'name' },
    { name: 'Age', prop: 'age' },
    { name: 'Company', prop: 'company' }
  ];

  constructor() { }

  ngOnInit(): void {
    // 给rows数组赋值
    this.rows = [
      { name: 'Tom', age: 29, company: 'IBM' },
      { name: 'Jerry', age: 31, company: 'Google' },
      { name: 'Peter', age: 25, company: 'Facebook' }
    ];
  }

}

模板：

  

  
  
    No data found