angular整合ng-zorro表格组件

我们继续使用angular和ng-zorro整合表格组件和按钮组件

 

 

首先在需要使用的模块的ts文件中引入ng-zorro的组件模块

 

 

 然后在使用的组件的ts文件中模拟后台的数据

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

interface Person {
  key: string;
  name: string;
  age: number;
  address: string;
}


@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit {
  listOfData: Person[] = [
    {
      key: '1',
      name: '少年阿鑫',
      age: 32,
      address: '上海川杨新苑'
    },
    {
      key: '2',
      name: '悦然行',
      age: 42,
      address: '信阳百花园'
    },
    {
      key: '3',
      name: '星辰',
      age: 32,
      address: '怀宁秀山中学'
    }
  ];
  constructor() { }

  ngOnInit() {
  }

}

 

然后在组件的html中使用

 

 

npm serve --open运行得到的效果如下

 

 遇到问题如下：

报错信息之 Can‘t bind to ‘ngForOf‘ since it isn‘t a known property of ‘tr‘. (“

解决：在根模块中引入CommonModule